@charset "utf-8";

/* ============================================================
   장비인프라 하위 페이지 공통
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI
         생산설비 2048:2421 · 연구설비 2048:2218

   생산설비와 연구설비가 글자 하나까지 같은 부분만 모았다.
   (분석·시험장비도 이 파일을 그대로 쓴다)
     페이지 틀 · 섹션 제목 · 통계 카드 넉 장 · 설비 카드 · 등장 규칙

   페이지마다 다른 것은 각자 파일에 둔다.
     생산설비  /css/page-production.css  인트로 · 설비 현장 갤러리
     연구설비  /css/page-research.css    연구 환경

   쓰는 법
     <body class="page infra-page prod-page">
     <link rel="stylesheet" href="../css/page-infra.css">   ← 페이지 파일보다 먼저

   색은 시안 토큰 그대로다.
     --color #135a9c / --black #222 / --gray #9f9f9f
     본문 회색 #575757·#878787 은 style.css 의 --ink-mid·--ink-body 와 같다.
   ============================================================ */

html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  overflow-x: clip;
}

.infra-page {
  --infra-point: #135a9c;      /* 시안 --color */
  --infra-ink:   #222;         /* 시안 --black */
  --infra-soft:  #f8f8f8;      /* 통계 카드 바탕 */
  --infra-card:  #e2e2e2;      /* 설비 카드 테두리 */
  --infra-div:   #e9e9e9;      /* 설비 카드 안 구분선 (시안 Line 49) */

  --grid-w: 1400;              /* 시안 260~1660 */
  --gutter: 40;
}

.infra-wrap {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
}

.infra-page main { padding-bottom: calc(180 * var(--u)); }

/* ==================== 섹션 머리 ==================== */
.infra-sec + .infra-sec { margin-top: calc(110 * var(--u)); }
/* 통계 카드 없이 하위 탭 바로 아래에서 섹션이 시작하는 페이지(안전관리) — 통계 카드와 같은 간격 */
.sub-tabs + .infra-sec { margin-top: calc(70 * var(--u)); }

.infra-sec__title {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: calc(40 * var(--u));     /* 시안 45 */
  line-height: 1.3;
  letter-spacing: -.05em;             /* -2.25 / 45 */
  color: #000;
}
/* 시안 Ellipse 65 — 제목 뒤에 붙는 코발트 점 10 */
.infra-sec__title::after {
  content: "";
  display: inline-block;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin-left: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--infra-point);
  vertical-align: baseline;
}

.infra-sec__lead {
  margin: calc(30 * var(--u)) 0 0;    /* 시안 제목(1546) → 설명(1621) */
  font-weight: 300;
  font-size: max(calc(21 * var(--u)), 14px);   /* 시안 23 */
  line-height: 1.5;                            /* 시안 35/23 */
  letter-spacing: -.03em;
  color: var(--ink-mid);
  word-break: keep-all;
}

/* 가운데로 놓는 섹션 (연구설비 '연구 환경') */
.infra-sec__head--center { text-align: center; }

/* ==================== 통계 넉 장 ====================
   시안 생산설비 2048:2601 · 연구설비 2048:2364 — 320 × 100 라운드 15 */
.infra-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(40 * var(--u));           /* 시안 320 짜리 넷이 40 간격 */
  /* 여섯 페이지 중 다섯은 하위 탭 바로 아래가 통계 카드다 (시안 1026 → 1096).
     인트로 덩어리가 있는 생산설비만 page-production.css 에서 다시 잡는다 */
  margin-top: calc(70 * var(--u));
}
.infra-stat {
  position: relative;
  min-height: calc(100 * var(--u));
  padding: calc(22 * var(--u)) calc(38 * var(--u));   /* 시안 카드 260 → 글자 298 */
  border-radius: calc(15 * var(--u));
  background: var(--infra-soft);
  overflow: hidden;
  transition: background-color .45s ease, box-shadow .45s ease,
              transform .45s cubic-bezier(.22, .61, .36, 1);
}
/* 아래에서 코발트 선이 자라 올라온다 */
.infra-stat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(3 * var(--u));
  background: var(--infra-point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
/*
  선택자가 길다. 리빌이 끝나면 .js [data-reveal].is-in 이 transform: none 을 거는데
  그 규칙이 :hover 보다 특이도가 높아, 짧게 쓰면 들어올림이 먹지 않는다.
*/
.infra-stat:hover,
.infra-stat.is-near,
.js .infra-stat[data-reveal].is-in:hover,
.js .infra-stat[data-reveal].is-in.is-near {
  background: var(--color-white);
  box-shadow: 0 calc(14 * var(--u)) calc(32 * var(--u)) rgba(19, 90, 156, .13);
  transform: translateY(calc(-4 * var(--u)));
}
.infra-stat:hover::after,
.infra-stat.is-near::after { transform: scaleX(1); }
.infra-stat:hover .infra-stat__value,
.infra-stat.is-near .infra-stat__value { color: var(--infra-point); }

.infra-stat__value {
  margin: 0;
  transition: color .45s ease;
  font-family: "Open Sans", var(--font-base);
  font-weight: 800;
  font-size: calc(35 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: -.05em;
  color: var(--infra-ink);
  white-space: nowrap;
}
/* 숫자 뒤 단위는 한 단 작다 — 시안 기·종·명·등급은 17 노토, L 은 20 오픈산스 */
.infra-stat__unit {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: calc(17 * var(--u));
  letter-spacing: 0;
}
.infra-stat__unit--en {
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: calc(20 * var(--u));
}
.infra-stat__label {
  margin: calc(11 * var(--u)) 0 0;    /* 시안 숫자줄(30) 아래 1368 */
  font-size: max(calc(15 * var(--u)), 12px);
  line-height: 1;                     /* 시안 15/15 */
  letter-spacing: -.05em;
  color: var(--gray);
}

/* ==================== 설비 카드 ====================
   시안 생산설비 '특수설비' 2048:2467 · 연구설비 '연구 장비' 2048:2304
   둘 다 680 × 250 라운드 15 를 두 줄로 놓는다 */
.infra-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(40 * var(--u));
  margin-top: calc(98 * var(--u));    /* 시안 설명(2799) → 카드(2897) */
}

.infra-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(250 * var(--u));
  padding: calc(35 * var(--u)) calc(50 * var(--u)) calc(30 * var(--u));
  border: 1px solid var(--infra-card);
  border-radius: calc(15 * var(--u));
  background: var(--color-white);
  overflow: hidden;
  /* 급하게 바뀌지 않도록 천천히 잦아드는 곡선을 쓴다 */
  transition: border-color .45s ease,
              box-shadow .45s ease,
              transform .45s cubic-bezier(.22, .61, .36, 1);
}
/* 카드 위쪽으로 코발트 선이 왼쪽에서 그어진다 */
.infra-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(3 * var(--u));
  background: var(--infra-point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
/* 통계 카드와 같은 이유로 선택자를 길게 잡는다 (리빌의 transform: none 을 이겨야 한다) */
.infra-card:hover,
.infra-card.is-near,
.js .infra-card[data-reveal].is-in:hover,
.js .infra-card[data-reveal].is-in.is-near {
  border-color: var(--infra-point);
  box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(19, 90, 156, .12);
  transform: translateY(calc(-4 * var(--u)));
}
.infra-card:hover::before,
.infra-card.is-near::before { transform: scaleX(1); }
.infra-card:hover .infra-card__title,
.infra-card.is-near .infra-card__title { color: var(--infra-point); }
/* 구분선도 같이 짙어진다 — 카드 안쪽까지 반응하는 느낌을 준다 */
.infra-card:hover .infra-card__spec,
.infra-card.is-near .infra-card__spec { border-top-color: rgba(19, 90, 156, .3); }

.infra-card__head {
  display: flex;
  align-items: baseline;
  gap: calc(16 * var(--u));           /* 시안 번호 299 → 제목 336 (번호 폭 21 + 16) */
}
.infra-card__no {
  flex: none;
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  /* 숫자 폭이 제각각이면 카드마다 제목 시작점이 어긋난다 */
  font-variant-numeric: tabular-nums;
  font-size: max(calc(20 * var(--u)), 13px);
  letter-spacing: -.03em;
  color: var(--infra-point);
}
.infra-card__title {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 800;
  font-size: calc(30 * var(--u));
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--infra-ink);
  word-break: keep-all;
  transition: color .45s ease;
}
.infra-card__desc {
  margin: calc(16 * var(--u)) 0 0 calc(37 * var(--u));   /* 제목과 같은 자리에서 시작한다 */
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: #838383;
  word-break: keep-all;
}
/* 시안 Line 49 — 카드 안쪽 좌우 50 을 뺀 580 짜리 가는 선 */
.infra-card__spec {
  margin: auto 0 0;
  margin-top: calc(24 * var(--u));
  padding-top: calc(27 * var(--u));
  border-top: 1px solid var(--infra-div);
  font-weight: 300;
  font-size: max(calc(15 * var(--u)), 12px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
  transition: border-color .45s ease;
}

/* ==================== 등장 ==================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .infra-stat[data-reveal],
.js .infra-card[data-reveal] { transition-delay: calc(var(--d, 0) * .09s); }

/* 제목 뒤 점은 글자가 다 드러난 뒤에 톡 하고 자리를 잡는다 */
.js .infra-sec__title::after { transform: scale(0); }
.js [data-reveal] .infra-sec__title::after {
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .3s;
}
.js [data-reveal].is-in .infra-sec__title::after { transform: scale(1); }

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .infra-page { --gutter: 16; }

  .infra-sec + .infra-sec { margin-top: var(--sp-section); }
  .sub-tabs + .infra-sec { margin-top: var(--sp-block); }
  .infra-sec__title { font-size: calc(26 * var(--u)); }
  .infra-sec__title::after {
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    margin-left: calc(7 * var(--u));
  }
  .infra-sec__lead {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.7;
  }

  /* 넷을 한 줄에 두면 숫자가 안 읽힌다. 두 줄로 나눈다 */
  .infra-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(10 * var(--u));
    margin-top: var(--sp-block);       /* 서브탭 → 첫 섹션 */
  }
  .infra-stat {
    min-height: 0;
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    border-radius: calc(10 * var(--u));
  }
  .infra-stat__value { font-size: calc(24 * var(--u)); line-height: 1.2; }
  .infra-stat__unit { font-size: calc(12 * var(--u)); }
  .infra-stat__unit--en { font-size: calc(14 * var(--u)); }
  .infra-stat__label { margin-top: calc(6 * var(--u)); font-size: max(calc(12 * var(--u)), 11px); }

  .infra-cards {
    grid-template-columns: 1fr;
    gap: calc(12 * var(--u));
    margin-top: var(--sp-head);
  }
  .infra-card {
    min-height: 0;
    padding: calc(18 * var(--u));
    border-radius: calc(12 * var(--u));
  }
  /* 마우스오버는 끈다 — 손가락으로 한 번 누르면 그 상태가 눌어붙는다.
     대신 스크립트가 화면 가운데 카드에 .is-near 를 붙여 준다 */
  .infra-card:hover,
  .infra-stat:hover {
    transform: none;
    box-shadow: none;
  }
  .infra-card:hover { border-color: var(--infra-card); }
  .infra-stat:hover { background: var(--infra-soft); }
  .infra-card:hover::before,
  .infra-stat:hover::after { transform: scaleX(0); }
  .infra-card:hover .infra-card__title { color: var(--infra-ink); }
  .infra-stat:hover .infra-stat__value { color: var(--infra-ink); }

  /* .is-near 는 살짝만 — 스크롤할 때마다 카드가 크게 들썩이면 어지럽다 */
  .infra-card.is-near,
  .infra-stat.is-near { transform: translateY(calc(-2 * var(--u))); }

  .infra-card__head { gap: calc(12 * var(--u)); }
  .infra-card__no { font-size: max(calc(13 * var(--u)), 12px); }
  .infra-card__title { font-size: calc(18 * var(--u)); }
  .infra-card__desc {
    margin-left: 0;
    margin-top: calc(10 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.6;
  }
  .infra-card__spec {
    margin-top: calc(14 * var(--u));
    padding-top: calc(14 * var(--u));
    font-size: max(calc(12 * var(--u)), 11px);
  }

  .infra-page main { padding-bottom: var(--sp-section); }   /* 마지막 섹션 → 푸터 */
}

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

  /* 색만 바뀌게 두고 움직임은 없앤다 */
  .infra-card,
  .infra-stat { transition: border-color .3s ease, background-color .3s ease; }
  .infra-card::before,
  .infra-stat::after { transition: none; }
  .infra-card:hover,
  .infra-card.is-near,
  .infra-stat:hover,
  .infra-stat.is-near { transform: none; }
}

/* ==================== 설비 현장 ====================
   시안 생산설비 2048:2444 · 분석시험 2048:2065
   큰 사진 1040×660 + 오른쪽 작은 사진 320×145.
   장 수는 자료에 따라 달라져 grid-auto-rows 로 고르게 나눈다 */
.infra-site {
  display: grid;
  grid-template-columns: minmax(0, 1040fr) minmax(0, 320fr);
  gap: calc(40 * var(--u));
  margin-top: calc(84 * var(--u));    /* 시안 제목(3918) → 사진(4041) */
}

.infra-site__main {
  position: relative;
  aspect-ratio: 1040 / 660;           /* 시안 그대로 */
  border-radius: calc(15 * var(--u));
  overflow: hidden;
  background: #dfe3e8;                /* 사진이 없거나 늦게 뜰 때의 바탕 */
}
/* 사진을 겹쳐 두고 켜진 것만 보인다 — 썸네일을 누르면 갈아 끼운다 */
.infra-site__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.infra-site__layer.is-on { opacity: 1; }
/* 사진이 바뀔 때 아주 천천히 제 크기로 내려앉는다 — 갈아 끼운 것이 눈에 들어온다 */
.infra-site__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.infra-site__layer.is-on img { transform: scale(1); }

/* ---------- 자막 ----------
   시안에는 없다. 사진만 넘어가면 무엇을 보는지 알 수 없어 넣었다 */
.infra-site__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: calc(16 * var(--u));
  padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(32 * var(--u));
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
  color: var(--color-white);
  pointer-events: none;
}
.infra-site__caption-no {
  flex: none;
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: max(calc(18 * var(--u)), 12px);
  letter-spacing: .05em;
  opacity: .75;
  font-variant-numeric: tabular-nums;
}
.infra-site__caption-text {
  font-weight: 500;
  font-size: max(calc(24 * var(--u)), 15px);
  letter-spacing: -.03em;
  word-break: keep-all;
}
/* 사진보다 한 박자 늦게 올라온다 — 사진이 먼저 자리를 잡고 글이 얹힌다 */
.js .infra-site__layer .infra-site__caption {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.js .infra-site__layer.is-on .infra-site__caption {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}

/* ---------- 멈춤 단추 ---------- */
.infra-site__hold {
  position: absolute;
  right: calc(24 * var(--u));
  bottom: calc(24 * var(--u));
  z-index: 2;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, background-color .3s ease;
}
/* 평소에는 숨어 있다가 갤러리에 손이 닿으면 나타난다 */
.infra-site:hover .infra-site__hold,
.infra-site:focus-within .infra-site__hold,
.infra-site.is-hold .infra-site__hold { opacity: 1; }
.infra-site__hold:hover { background: rgba(0, 0, 0, .55); }
.infra-site__hold:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}
/* 멈춤 표시 — 세로 막대 둘 */
.infra-site__hold::before,
.infra-site__hold::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(4 * var(--u));
  height: calc(15 * var(--u));
  margin-top: calc(-7.5 * var(--u));
  background: var(--color-white);
}
.infra-site__hold::before { left: calc(50% - 6 * var(--u)); }
.infra-site__hold::after  { left: calc(50% + 2 * var(--u)); }
/* 눌러서 멈춘 상태면 재생 삼각형으로 바뀐다 */
.infra-site__hold[aria-pressed="true"]::before {
  left: calc(50% - 5 * var(--u));
  width: 0;
  height: 0;
  margin-top: calc(-8 * var(--u));
  border-top: calc(8 * var(--u)) solid transparent;
  border-bottom: calc(8 * var(--u)) solid transparent;
  border-left: calc(13 * var(--u)) solid var(--color-white);
  background: none;
}
.infra-site__hold[aria-pressed="true"]::after { display: none; }

.infra-site__thumbs {
  display: grid;
  /* 장 수가 페이지마다 다르다. 몇 장이든 칸을 고르게 나눈다
     (그냥 1fr 은 최소 높이가 '내용 크기' 라서 사진이 칸을 밀어낸다) */
  grid-auto-rows: minmax(0, 1fr);
  gap: calc(27 * var(--u));           /* 시안 145 짜리 넷이 27 간격 */
}
.infra-site__thumb {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: calc(15 * var(--u));
  background: #dfe3e8;
  overflow: hidden;
  cursor: pointer;
  opacity: .72;
  transition: opacity .3s ease;
}
.infra-site__thumb img {
  position: absolute;               /* 흐름에서 빼야 칸 높이를 밀지 않는다 */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.infra-site__thumb:hover img { transform: scale(1.07); }
/* 시안은 작은 사진 위에 검정 35% 를 덮어 둔다. 고른 것만 걷힌다 */
.infra-site__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .35);
  transition: opacity .3s ease;
}
.infra-site__thumb:hover { opacity: 1; }
.infra-site__thumb[aria-current="true"] { opacity: 1; }
.infra-site__thumb[aria-current="true"]::before { opacity: 0; }
.infra-site__thumb[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: calc(3 * var(--u)) solid var(--infra-point);
  border-radius: inherit;
}
.infra-site__thumb:focus-visible {
  outline: 2px solid var(--infra-point);
  outline-offset: 3px;
}

/* ---------- 진행 막대 ----------
   지금 사진에 남은 시간을 보여 준다.
   이 막대가 끝나는 순간 스크립트가 다음 사진으로 넘긴다 —
   그래서 막대가 멈추면 넘김도 함께 멈춘다.
   시간은 js/page-infra.js 의 SITE_AUTO 와 같아야 한다 */
@keyframes infraSiteBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* 홈 — 코발트 테두리 안쪽으로 들어와 앉는다 */
.infra-site__track {
  position: absolute;
  left: calc(9 * var(--u));
  right: calc(9 * var(--u));
  bottom: calc(9 * var(--u));
  z-index: 3;
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: rgba(255, 255, 255, .32);
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease;
}
.infra-site__thumb[aria-current="true"] .infra-site__track { opacity: 1; }
.infra-site__bar {
  display: block;
  width: 100%;
  height: 100%;
  /* 테두리가 코발트라 같은 색이면 얼마나 찼는지 보이지 않는다 */
  background: var(--color-white);
  transform: scaleX(0);
  transform-origin: left;
}
.js .infra-site__thumb[aria-current="true"] .infra-site__bar {
  animation: infraSiteBar 5s linear forwards;
}
/*
  손이 닿았거나 화면 밖이거나 눌러서 멈췄으면 막대도 멎는다.
  위 규칙이 animation 단축 속성이라 play-state: running 까지 함께 지정한다.
  그래서 멈추려면 선택자를 그보다 길게 잡아야 한다.
*/
.js .infra-site:hover .infra-site__thumb[aria-current="true"] .infra-site__bar,
.js .infra-site:focus-within .infra-site__thumb[aria-current="true"] .infra-site__bar,
.js .infra-site.is-hold .infra-site__thumb[aria-current="true"] .infra-site__bar {
  animation-play-state: paused;
}




/* ---------- 좁은 화면 ---------- */
@media (max-width: 768px) {
  /* 큰 사진 아래로 썸네일을 가로로 눕힌다 */
  .infra-site {
    grid-template-columns: 1fr;
    gap: calc(10 * var(--u));
    margin-top: var(--sp-head);
  }
  .infra-site__main { aspect-ratio: 16 / 10; border-radius: calc(12 * var(--u)); }
  .infra-site__caption {
    gap: calc(8 * var(--u));
    padding: calc(40 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  }
  .infra-site__caption-no { font-size: max(calc(11 * var(--u)), 11px); }
  .infra-site__caption-text { font-size: max(calc(14 * var(--u)), 13px); }
  /* 손가락에는 마우스오버가 없다. 단추를 늘 보이게 둔다 */
  .infra-site__hold {
    right: calc(12 * var(--u));
    bottom: calc(12 * var(--u));
    width: 40px;
    height: 40px;
    opacity: 1;
  }
  .infra-site__track {
    left: calc(6 * var(--u));
    right: calc(6 * var(--u));
    bottom: calc(6 * var(--u));
    height: calc(3 * var(--u));
  }
  .infra-site__thumbs {
    grid-auto-rows: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: calc(8 * var(--u));
  }
  .infra-site__thumb { aspect-ratio: 320 / 145; border-radius: calc(8 * var(--u)); }
  .infra-site__thumb:hover img { transform: none; }
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  .infra-site__layer,
  .infra-site__thumb { transition: none; }
  .infra-site__layer img,
  .infra-site__thumb img,
  .infra-site__thumb:hover img { transform: none; transition: none; }
  .js .infra-site__layer .infra-site__caption,
  .js .infra-site__layer.is-on .infra-site__caption {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /*
    막대가 돌지 않으면 자동 넘김도 없다 (넘기는 시각을 막대 끝에서 잡기 때문이다).
    멈출 것이 없으니 막대와 멈춤 단추를 함께 감춘다.
    사진은 썸네일을 눌러 그대로 넘길 수 있다.
  */
  .js .infra-site__thumb[aria-current="true"] .infra-site__bar,
  .js .infra-site.is-hold .infra-site__thumb[aria-current="true"] .infra-site__bar { animation: none; }
  .infra-site__track,
  .infra-site__hold { display: none; }
}

/* ==================== 설명 패널 ====================
   연구설비 '연구 환경' 2048:2241 · 분석시험 '분석 역량' 2048:2088
   · 특화기술 '합성 구조' 2048:1923 — 셋이 같은 틀이다.
   1400 × 590 라운드 30 회색 판 안에 왼쪽 글, 오른쪽 640 × 450 라운드 20 사진.
   사진 화각은 페이지마다 달라 --panel-pos 로 준다 */
.infra-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(640 * var(--u)));
  align-items: center;
  gap: calc(60 * var(--u));
  margin-top: calc(54 * var(--u));    /* 시안 제목(3478) → 판(3602) */
  padding: calc(70 * var(--u)) calc(80 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--card-bg-soft);    /* 시안 #f7f7f7 — style.css 와 같은 값 */
}

.infra-panel__title {
  margin: 0;
  font-weight: 600;
  font-size: calc(35 * var(--u));
  line-height: 1.35;
  letter-spacing: -.03em;
  color: var(--infra-ink);
  word-break: keep-all;
}
.infra-panel__desc {
  margin: calc(30 * var(--u)) 0 0;    /* 시안 3697 → 3811 (제목 두 줄 아래) */
  font-weight: 400;
  font-size: max(calc(21 * var(--u)), 14px);   /* 시안 23 */
  line-height: 1.6;
  letter-spacing: -.02em;
  color: var(--ink-mid);
  word-break: keep-all;
}

/* 시안 Ellipse 68 — 5 짜리 코발트 점이 앞에 붙는 목록 */
.infra-panel__list {
  margin: calc(40 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.infra-panel__list li {
  position: relative;
  padding-left: calc(17 * var(--u));   /* 시안 점 360 → 글자 377 */
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);   /* 시안 20 */
  line-height: calc(38.5 * var(--u));  /* 시안 줄 간격 3955 → 3993 */
  letter-spacing: -.03em;
  color: var(--ink-body);
  word-break: keep-all;
}
/* 앞머리(용어) 뒤에 붙는 영문 라벨 — 특화기술 '합성 기술 역량' 목록 (2026-09-11 확정본에 국문·영문 라벨이 함께 왔다).
   본문보다 한 단 작고 옅게, 기울이지 않는다 */
.infra-panel__term em {
  margin-left: calc(4 * var(--u));
  font-style: normal;
  font-weight: 400;
  font-size: .78em;
  letter-spacing: .01em;
  color: var(--gray);
}
/* --stack: 항목마다 '라벨 줄 + 내용 줄' 두 줄로 쌓는다.
   한 줄에 라벨·영문·내용을 다 넣으면 패널 폭(1920 기준 약 490)을 넘겨 화학식이 어중간하게 접힌다 (2026-09-11) */
.infra-panel__list--stack li {
  line-height: 1.5;
  padding-top: calc(4 * var(--u));
  padding-bottom: calc(4 * var(--u));
}
.infra-panel__list--stack li + li { margin-top: calc(14 * var(--u)); }
.infra-panel__list--stack li::before { top: calc(4 * var(--u) + .75em); }
.infra-panel__list--stack .infra-panel__term {
  display: block;
  font-weight: 500;
  color: var(--ink-mid);
}
.infra-panel__list--stack .infra-panel__val {
  display: block;
  margin-top: calc(2 * var(--u));
}
.infra-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(19 * var(--u));            /* 줄 높이의 절반 */
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  margin-top: calc(-2.5 * var(--u));
  border-radius: 50%;
  background: var(--infra-point);
}

.infra-panel__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 640 / 450;             /* 시안 그대로 */
  border-radius: calc(20 * var(--u));  /* 시안 마스크 rx 20 */
  overflow: hidden;
  background: #dfe3e8;                 /* 사진이 없거나 늦게 뜰 때의 바탕 */
}
.infra-panel__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 원본에서 잘라 쓰는 자리가 페이지마다 다르다. 각 페이지가 --panel-pos 로 준다 */
  object-position: var(--panel-pos, 50% 50%);
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.infra-panel:hover .infra-panel__figure img { transform: scale(1.04); }

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {

  .infra-panel {
    grid-template-columns: 1fr;
    gap: calc(20 * var(--u));
    margin-top: var(--sp-head);
    padding: calc(20 * var(--u));
    border-radius: calc(16 * var(--u));
  }
  /* 사진을 글보다 먼저 보여 준다 — 무엇에 대한 이야기인지 먼저 눈에 들어온다 */
  .infra-panel__figure { order: -1; border-radius: calc(12 * var(--u)); }

  .infra-panel__title { font-size: calc(19 * var(--u)); line-height: 1.45; }
  .infra-panel__desc {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.7;
  }
  .infra-panel__list { margin-top: calc(16 * var(--u)); }
  .infra-panel__list li {
    padding-left: calc(12 * var(--u));
    font-size: max(calc(13 * var(--u)), 13px);
    line-height: calc(26 * var(--u));
  }
  .infra-panel__list li::before {
    top: calc(13 * var(--u));
    width: calc(4 * var(--u));
    height: calc(4 * var(--u));
    margin-top: calc(-2 * var(--u));
  }
  .infra-panel__list--stack li { line-height: 1.55; padding-top: 0; padding-bottom: 0; }
  .infra-panel__list--stack li + li { margin-top: calc(10 * var(--u)); }
  .infra-panel__list--stack li::before { top: .78em; }
  .infra-panel:hover .infra-panel__figure img { transform: none; }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .infra-panel__figure img,
  .infra-panel:hover .infra-panel__figure img { transform: none; transition: none; }
}