/* processing.css — 가공/인증($pageKey='processing') 전용 스타일. processing 페이지에서만 자동 로드. */

/* ── 페이지 로컬 변수 ─────────────────────────────────────
   PC 기준값. 모바일(≤1024px)에서 미디어쿼리로 덮어쓴다. */
.processing-page {
  --hero-h: 320px;
  --sect-gap: 64px;
  /* 비주얼 → 본문 사이 간격 */
  --media-gap: 16px;
  /* 인증로고 ↔ 시설사진 */
  --body-gap: 32px;
  /* 미디어 묶음 ↔ 설명문 */
  --bottom-gap: 120px;
  /* 설명문 → 푸터 */
  /* 시안 160px. 1024~1900 구간에서 8개가 한 줄을 유지하도록 살짝 축소 */
  --cert-size: clamp(104px, 8.2vw, 160px);
  --cert-gap: 16px;
  --desc-size: 20px;
  --desc-weight: 600;
}

/* ── 상단 비주얼 (풀블리드) ───────────────────────────── */
.proc-hero {
  position: relative;
  width: 100%;
  height: var(--hero-h);
  overflow: hidden;
}

.proc-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 좌→우 어둠 그라데이션 오버레이 (시안값) */
.proc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(31, 40, 55, 0.5) 27.79%,
      rgba(31, 40, 55, 0.1) 100%);
}

/* ── 본문 ─────────────────────────────────────────────── */
.proc-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--body-gap);
  padding: var(--sect-gap) var(--gutter) var(--bottom-gap);
}

.proc-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--media-gap);
  width: 100%;
}

/* ── 인증 로고 ────────────────────────────────────────── */
.cert-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--cert-gap);
}

.cert-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cert-size);
  height: var(--cert-size);
}

/* FSSC 로고는 가로로 넓은 셀 (시안 180×160) */
.cert-item.is-wide {
  width: calc(var(--cert-size) + 20px);
}

.cert-item__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── 시설 사진 (2장) ──────────────────────────────────── */
.proc-gallery {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 964px;
  /* 480 + 480 + 4 */
}

.proc-gallery__item {
  flex: 1 1 0;
  max-width: 480px;
  aspect-ratio: 1408 / 768;
  margin: 0;
  overflow: hidden;
}

.proc-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 설명문 ───────────────────────────────────────────── */
.proc-desc {
  width: 100%;
  /* align-items:center 부모에서 콘텐츠 최대폭으로 늘어나 넘치는 것 방지 */
  max-width: var(--container-3xl);
  /* 1600 */
  font-size: var(--desc-size);
  line-height: 1.5;
  letter-spacing: var(--tracking);
  color: var(--gray-700);
  text-align: center;
}

/* 시안의 구조적 줄바꿈(…standards, / including…)을 블록으로 재현.
   좁은 화면에서는 각 줄이 자연스럽게 추가 줄바꿈된다. */
.proc-desc__line {
  display: block;
}

.proc-desc strong {
  font-weight: var(--desc-weight);
  /* "GMO-free" 등 용어가 하이픈에서 쪼개지지 않도록 */
  white-space: nowrap;
}

/* ── 반응형: 모바일 시안 (≤1024px) ───────────────────────
   비주얼 160 · 로고 80(4열 2행) · 시설사진 세로 스택 · 본문 18px */
@media (max-width: 1024px) {
  .processing-page {
    --hero-h: 160px;
    --sect-gap: 32px;
    --media-gap: 8px;
    --body-gap: 16px;
    --bottom-gap: 80px;
    --cert-size: 80px;
    --cert-gap: 4px;
    --desc-size: 18px;
    --desc-weight: 500;
  }

  .proc-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 4열 2행으로 떨어지도록 폭 고정 (80×4 + gap 4×3 = 332) */
  .cert-list {
    max-width: 500px;
  }

  /* 모바일은 FSSC도 정사각 셀 */
  .cert-item.is-wide {
    width: var(--cert-size);
  }

  /* 시설 사진 세로 스택 */
  .proc-gallery {
    flex-direction: column;
    max-width: 500px;
  }

  /* 세로 플렉스에서는 flex:1(basis 0)이 높이를 0으로 무너뜨리므로
     aspect-ratio 로 높이를 잡도록 flex 해제 */
  .proc-gallery__item {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
}