/* ===========================================================================
   제품소개 — 라인업 띠 · 3D 무대 · 설비 구간

   제품소개(/solutions) 페이지만 받는다(solutions.html 의 head_extra). 순로구분기의
   원리 · 예시 · 두 방식 비교는 products-sequence.css, PostalNexus 흐름은
   products-nexus.css 에 있다.

   3D 무대(.product-stage)의 모양은 여기서, 움직임은 product3d.js 가 맡는다.
   스크립트가 이 파일에 하는 일은 첫 장면을 그린 무대에 .is-live 를 붙이는 것
   하나다. 그 전까지, 그리고 3D 가 끝내 뜨지 않으면(스크립트 없음 · 움직임 줄임 ·
   WebGL 없음) 포스터가 무대를 채운다. 이 페이지는 포스터만으로도 완성돼 있다.
   =========================================================================== */

/* 무대와 띠 그림의 바탕. 포스터가 뜨기 전에 잠깐 보이는 면이라, 비어 보이지 않게
   가운데 아래쪽(설비가 놓일 자리)만 조금 밝힌다. */
.product-stage,
.lineup__thumb {
  --nx-stage-bg: radial-gradient(120% 85% at 50% 72%, #2a2a2d 0%, #111113 46%, #000000 100%);
}

/* ── 라인업 띠 ─────────────────────────────────────────────
   넓은 화면에서는 다섯 칸으로 나눈다. 좁아지면 옆으로 미는 띠가 된다 — 다섯을
   두 줄로 접으면 마지막 줄에 하나만 외롭게 남는다. */

.lineup-sec {
  padding-bottom: var(--nx-sp-16);
}

.lineup {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--nx-sp-3);
}

.lineup__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--nx-sp-3) var(--nx-sp-3) var(--nx-sp-5);
  border-radius: var(--nx-r-xl);
  text-align: center;
  transition: background var(--nx-t-fast);
}

.lineup__item:hover {
  background: var(--nx-bg-sunken);
}

.lineup__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--nx-sp-4);
  border-radius: var(--nx-r-md);
  overflow: hidden;
  background: var(--nx-stage-bg);
}

.lineup__thumb img,
.lineup__glyph {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lineup__item:hover .lineup__thumb img {
  transform: scale(1.05);
}

.lineup__name {
  font-size: var(--nx-fs-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--nx-tracking);
  color: var(--nx-text);
}

/* '2-Pass' 가 하이픈에서 갈라져 '2-' 만 윗줄에 남지 않게 한다. */
.lineup__variant {
  white-space: nowrap;
}

.lineup__note {
  margin-top: var(--nx-sp-1);
  font-size: var(--nx-fs-sm);
  line-height: 1.4;
  color: var(--nx-text-2);
}

.lineup__fn {
  margin-top: var(--nx-sp-6);
  text-align: center;
}

/* ── 3D 무대 ─────────────────────────────────────────────
   넓은 화면은 16:9, 휴대폰은 4:3 이다. 휴대폰 폭에서 16:9 면 기계가 손톱만 해진다.
   product3d.js 는 무대의 실제 크기를 읽어 구도를 다시 잡는다. */

.product-stage {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--nx-r-xl);
  background: var(--nx-stage-bg);
  isolation: isolate;
}

.product-stage__poster,
.product-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-stage__poster {
  object-fit: cover;
}

/* 포스터를 못 받으면 깨진 그림 표시와 대체 글이 그림 자리에 뜬다. 그림이 제대로
   뜨면 img 에는 가상 요소가 그려지지 않으므로, 이 덮개는 못 받았을 때만 나타난다.
   라인업 띠의 그림도 같은 파일이라 같이 덮는다. */
.product-stage__poster::after,
.lineup__thumb img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nx-stage-bg);
}

/* 캔버스는 포스터 위에 겹쳐 두고, 첫 장면이 그려진 뒤에야 서서히 드러낸다.
   그 전에 보이면 빈 검은 판이 포스터를 가린다. 손가락이 무대 위에서 페이지를
   굴릴 수 있게 누름을 받지 않는다. */
.product-stage__canvas {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease-out;
}

.product-stage.is-live .product-stage__canvas {
  opacity: 1;
}

/* 순로구분기 카드 안의 무대는 카드보다 한 단 작게 둥글린다. 같으면 모서리가 겹쳐 보인다. */
.seqtype .product-stage {
  border-radius: var(--nx-r-lg);
}

@media (max-width: 699px) {
  .product-stage {
    aspect-ratio: 4 / 3;
    border-radius: var(--nx-r-lg);
  }
}

/* ── 설비 구간 ────────────────────────────────────────────
   머리를 두 칸으로 나눠 무대를 첫 화면 안에 들인다. 왼쪽은 한 줄 소개와 이름,
   오른쪽은 요약과 상세 링크. 이름과 요약의 아랫줄을 맞춘다. */

.prod__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--nx-sp-5) var(--nx-sp-16);
  align-items: end;
  margin-bottom: var(--nx-sp-12);
}

.prod__name {
  font-size: var(--nx-fs-3xl);
  line-height: 1.07;
  letter-spacing: var(--nx-tracking-tight);
}

.prod__lead {
  max-width: 38em;
  font-size: var(--nx-fs-md);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--nx-text-2);
}

.prod__more {
  margin-top: var(--nx-sp-4);
  font-size: var(--nx-fs-md);
}

/* 무대 밑의 사양 네 줄. 표처럼 칸을 긋지 않고 가는 윗선 하나로 항목을 가른다. */
.prod__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nx-sp-5) var(--nx-sp-6);
  margin: var(--nx-sp-8) 0 0;
}

.prod__specs > div {
  padding-top: var(--nx-sp-4);
  border-top: 1px solid var(--nx-divider);
}

.prod__specs dt {
  font-size: var(--nx-fs-sm);
  color: var(--nx-text-2);
}

.prod__specs dd {
  margin: var(--nx-sp-1) 0 0;
  font-size: var(--nx-fs-base);
  line-height: 1.45;
  color: var(--nx-text);
}

/* ── 좁은 화면 ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .prod__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin-bottom: var(--nx-sp-10);
  }
  .prod__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 띠를 옆으로 민다. 화면 끝까지 흐르게 본문 여백만큼 바깥으로 빼고, 첫 칸은
   본문 왼쪽 선에 붙인다. 다음 칸이 반쯤 보여 밀 수 있다는 것을 알린다. */
@media (max-width: 860px) {
  /* 밀리는 띠는 위아래도 잘라 낸다. 포커스 고리(바깥 3px)가 잘리지 않게 위에 틈을
     두고, 그만큼 바깥 여백을 당겨 자리는 그대로 둔다. */
  .lineup {
    --edge: var(--nx-sp-6);
    display: flex;
    gap: var(--nx-sp-2);
    margin: calc(-1 * var(--nx-sp-2)) calc(-1 * var(--edge)) 0;
    padding: var(--nx-sp-2) var(--edge);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    scrollbar-width: thin;
  }
  .lineup > li {
    flex: 0 0 clamp(148px, 38vw, 220px);
    scroll-snap-align: start;
  }
  .lineup__item {
    padding: var(--nx-sp-2) var(--nx-sp-2) var(--nx-sp-3);
  }
}

@media (max-width: 720px) {
  .lineup {
    --edge: var(--nx-sp-5);
  }
  .lineup__fn {
    text-align: left;
  }
}