/* 첫 화면 · «일단 핵심부터» · 스탯 콜아웃.
 *
 * ★애플 제품 페이지의 첫 화면 구성을 따른다 — 작은 제품명, 두 줄짜리 큰 제목, 한 줄
 *   설명, 버튼 하나와 문장형 링크, 그리고 화면 사진 한 장. 첫 화면에서 말하는 것은
 *   그것뿐이다. 예전에 첫 화면에 같이 있던 것들은 각자의 장으로 내려갔다:
 *   지표·기둥 → «일단 핵심부터», 시나리오 격자 → 도입 사례, 시스템 그림 → 작동 방식.
 */

/* ══ 히어로 ══ */
.hero {
  position: relative; overflow: hidden; background: var(--bg-deep);
  padding-top: clamp(72px, 10vw, 128px); padding-bottom: 0;
}
.hero__glow {
  position: absolute; inset: -20% 0 auto; height: 900px; pointer-events: none;
  background:
    radial-gradient(52% 44% at 50% 0%, rgba(34, 211, 238, .16), transparent 64%),
    radial-gradient(40% 36% at 84% 10%, rgba(139, 92, 246, .10), transparent 60%);
  filter: blur(8px);
}
/* 배경 물결 — 제목 뒤에 깔리고 아래로 갈수록 사라진다 (static/js/hero-wave.js).
 * ★★아래쪽을 **마스크로 지운다.** 물결이 계근 장면(hero-live)까지 내려오면 3D 두 개가
 *   겹쳐 보여 둘 다 지저분해진다. 제목이 있는 위쪽에서만 살아 있게 한다.
 * ★그려지기 전에는 투명하다 — 캔버스가 붙는 순간 검은 네모가 번쩍이지 않게. */
.hero__wave {
  position: absolute; inset: 0 0 auto; z-index: 0; pointer-events: none;
  /* ★★ **퍼센트로 주면 안 된다.** `78%` 로 뒀더니 부모(.hero)의 높이가 내용에 따라
     정해지는 값이라 풀리지 않아 높이가 0 이 되고, 캔버스가 붙어도 아무것도 그려지지
     않았다 — 화면이 검은 채였다.
     ★이 값은 **기본값일 뿐이다.** 진짜 높이(히어로 위 ~ 계근 장면 직전)는 스크립트가
     재서 인라인으로 덮는다(hero-wave.js 의 fit). 스크립트가 없거나 못 재면 이 값이 남는다. */
  height: clamp(720px, 96vh, 1180px);
  opacity: 0; transition: opacity 1.6s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 34%, #000 62%, transparent 94%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 34%, #000 62%, transparent 94%);
}
.hero__wave.is-ready { opacity: .58; }
.hero__wave canvas { display: block; width: 100%; height: 100%; }
/* ★★글자가 앉는 자리를 **눌러 준다.** 물결이 밝으면 제목은 버텨도 그 아래 칩·안내문이
   무늬 위에 뜬다 — 배경이 본문과 경쟁하는 순간 배경이 아니라 방해물이 된다.
   캔버스의 자식 뒤에 그려지므로 물결 위·글자 아래에 정확히 깔린다. */
.hero__wave::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 46% at 50% 34%, var(--bg-deep) 12%, rgba(2, 6, 10, .72) 42%, transparent 76%);
}

/* 3D 장면(hero3d.js)과 그 위의 비네트. 높이는 스크립트가 사진 윗부분까지로 맞춘다(--scene-h). */
.hero__scene {
  position: absolute; inset: 0 0 auto; height: var(--scene-h, 72%); z-index: 0; pointer-events: none;
}
.hero__scene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease; }
.hero__scene.is-ready canvas { opacity: 1; }
.hero__vignette {
  position: absolute; inset: 0 0 auto; height: var(--scene-h, 72%); z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 6, 10, .6) 0%, rgba(2, 6, 10, 0) 26%, rgba(2, 6, 10, 0) 74%, var(--bg-deep) 100%),
    radial-gradient(60% 40% at 50% 38%, rgba(2, 6, 10, .55), transparent 70%);
}
.hero__inner { position: relative; z-index: 1; text-align: center; max-width: 980px; }
/* 제목의 낱말 등장 — motion.js 가 낱말을 .w 로 쪼갠 뒤에는 통째 등장 대신 낱말이 차례로 떠오른다. */
.hero__title.is-split { animation: none; }
.hero__title .w {
  display: inline-block; animation: word-in .9s var(--ease) both;
  animation-delay: calc(.12s + var(--i, 0) * .07s);
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(.35em); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero__product { font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; color: var(--text-muted); }
/* ★좁은 화면에서는 9vw — 390px 에서 35px 이라 «계근대를 바꾸지 않고,» 가 한 줄에 선다.
   낱말 단위 줄바꿈(keep-all) 이라 한 글자만 넘쳐도 낱말 하나가 통째로 다음 줄로 떨어진다. */
.hero__title {
  margin-top: var(--s-4); font-size: clamp(34px, 9vw, 92px);
  line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance;
}
.hero__lead {
  margin-top: var(--s-5); font-size: clamp(19px, 2.2vw, 28px); line-height: 1.35;
  letter-spacing: -0.02em; color: var(--text); font-weight: 500;
}
.hero__ctas {
  display: flex; gap: var(--s-4) var(--s-6); margin-top: var(--s-6);
  flex-wrap: wrap; justify-content: center; align-items: center;
}
.hero__ctas .tlink { font-size: 17px; }
.hero__inner .chips { justify-content: center; margin-top: var(--s-6); }
/* ★점은 첫 줄에 붙는다(flex-start). 좁은 화면에서 문장이 두 줄이 되면 가운데 정렬된
   점이 줄 사이에 떠서 «두 줄 사이의 점» 으로 읽힌다. */
.hero__note {
  display: inline-flex; align-items: flex-start; gap: 9px; margin-top: var(--s-5);
  font-size: 14px; line-height: 1.5; color: var(--text-muted); text-align: left;
}
.hero__note .dot { margin-top: 7px; }

/* 첫 화면 아래 — 실제 계그니 스테이션 화면을 책상 위 모니터에 담는다. ★화면은 목업이 아니다.
 * 틀만 CSS 로 그린다: 얇은 베젤, 아래 턱과 전원 표시등, 알루미늄 목과 받침, 바닥 그림자,
 * 화면 유리에 비스듬히 스치는 반사, 화면 빛이 책상에 번지는 은은한 발광. */
.hero__shot {
  position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(72px, 9vw, 128px);
}
.hmon { position: relative; max-width: 1160px; margin: 0 auto; perspective: 1800px; }
.hmon__display {
  position: relative; z-index: 1;
  padding: clamp(5px, .7vw, 10px) clamp(5px, .7vw, 10px) 0;
  border-radius: clamp(12px, 1.4vw, 20px);
  background: linear-gradient(180deg, #2b2c2f 0%, #161719 18%, #0e0f11 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 0 1px #040405,
    0 70px 120px -40px rgba(0,0,0,.95),
    0 20px 180px rgba(0,102,204,.2);
  transform-origin: 50% 100%;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.hmon__panel { position: relative; overflow: hidden; border-radius: clamp(4px, .5vw, 8px); background: #000; box-shadow: 0 0 0 1px #000; }
.hmon__panel img { display: block; width: 100%; height: auto; }
/* 유리 반사 — 왼쪽 위에서 비스듬히 스치는 빛 한 장과 윗가장자리의 얇은 광택. 화면을 가리지 않게 옅다. */
.hmon__glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(116deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 33%, transparent 33.2%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 12%);
}
.hmon__chin { display: grid; place-items: center; height: clamp(16px, 2vw, 28px); }
.hmon__chin i {
  width: 4px; height: 4px; border-radius: 50%;
  background: #e8f1ff; box-shadow: 0 0 6px rgba(200,225,255,.7); opacity: .55;
}
.hmon__stand { position: relative; display: grid; justify-items: center; height: clamp(54px, 6.4vw, 96px); margin-top: -2px; }
.hmon__neck {
  width: 15%; height: 100%;
  background: linear-gradient(90deg, #3c3f44 0%, #8e9197 38%, #b9bcc1 50%, #6f7277 64%, #2b2d31 100%);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.hmon__foot {
  position: absolute; bottom: 0; width: 36%; height: clamp(7px, .9vw, 13px);
  border-radius: 3px 3px 12px 12px;
  background: linear-gradient(180deg, #c3c6cb 0%, #7b7e83 35%, #3a3c40 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
}
/* 바닥 그림자와 화면 빛의 번짐 */
.hmon__stand::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -26px; height: 52px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 50% 50%, rgba(0,0,0,.95), transparent 70%),
    radial-gradient(50% 60% at 50% 30%, rgba(41,151,255,.16), transparent 75%);
}
.hmon figcaption {
  margin-top: 34px; text-align: center;
  font-size: 12px; color: var(--text-faint); letter-spacing: .02em;
}
/* 스크롤로 들어올 때 — 뒤로 조금 눕혀 있다가 바로 선다(받침 위 경첩이 축). data-reveal 은
   site.js 가 data-anim 을 보고 붙인다. 스크립트가 없거나 움직임 줄이기면 붙지 않아 처음부터 서 있다. */
.hmon[data-reveal] .hmon__display { transform: rotateX(14deg) translateY(24px) scale(.965); }
.hmon[data-reveal].is-in .hmon__display { transform: none; }
/* ★스크롤 연동을 지원하는 브라우저에서는 스크롤 위치에 직접 묶는다. site.js 의 안전망(4초 뒤 전부
   is-in)이 화면 아래의 모니터를 미리 세워 버려, 천천히 읽는 사람은 일어서는 모습을 못 봤다.
   애니메이션 값이 위의 transform 을 덮으므로 두 방식이 다투지 않는다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hmon .hmon__display {
      animation: hmon-stand linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}
@keyframes hmon-stand {
  from { transform: rotateX(14deg) translateY(24px) scale(.965); }
  to   { transform: none; }
}

/* ── 화면 아래 세 줄 ── 스크린샷에 보이는 것을 곧바로 «그래서 무엇인가» 로 옮긴다. */
.shotpoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-7); text-align: left; }
.shotpoints li { padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.shotpoints strong { display: block; font-size: 17px; color: var(--text-strong); margin-bottom: 6px; letter-spacing: -0.02em; }
.shotpoints span { font-size: 15px; color: var(--text-muted); }

/* ══ 일단 핵심부터 ══
 * 애플의 «Get the highlights» 자리. 세 기둥(규제 · 인건비 · 분쟁)을 큰 글자 한 줄씩.
 * ★세 기둥은 시장조사보고서 3.4 의 결론이다 — «무인화 편의» 로 팔면 실패하고
 *   «규제 대응 + 인건비 + 분쟁 방어» 로 팔면 팔린다. 그래서 첫 장은 이 셋이다. */
.hl { max-width: 980px; margin-inline: auto; }
.hl__item {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s-6); align-items: start;
  padding-block: var(--s-7); border-top: 1px solid var(--line-soft);
}
.hl__item:last-child { border-bottom: 1px solid var(--line-soft); }
.hl__icon {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.hl__icon .ico { width: 28px; height: 28px; }
.hl__tag { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: var(--s-2); }
.hl__item h3 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.03em; line-height: 1.15; }
.hl__body { margin-top: var(--s-3); font-size: 19px; color: var(--text-muted); line-height: 1.5; max-width: 30em; }

/* ══ 스탯 콜아웃 ══
 * ★★숫자만 크게 띄우고 «무엇을 센 숫자인가» 를 안 적으면, 읽는 사람은 그것을 실적으로
 *   오해한다. label 과 note 는 반드시 붙는다(데이터에 있다).
 * ★큰 숫자는 본문 글꼴로 그린다. 고정폭 원칙은 tabular-nums 로 지키고(Pretendard 가
 *   지원한다), 코드용 모노 글꼴은 쓰지 않는다 — 큰 모노 숫자는 «콘솔» 처럼 읽힌다. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-top: var(--s-9); }
.stat { padding-left: var(--s-5); border-left: 1px solid var(--line-soft); }
.stat__value { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.stat__value .num {
  font-family: var(--font); font-size: clamp(48px, 5.6vw, 80px); font-weight: 700; letter-spacing: -0.04em;
  background: var(--num-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__unit { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; color: var(--text); }
.stat__label { margin-top: var(--s-3); font-size: 17px; font-weight: 600; color: var(--text-strong); }
.stat__note { margin-top: 4px; font-size: 14px; color: var(--text-muted); }

/* 적용 산업 한 줄 — 마퀴 대신 조용한 목록. 움직이는 띠는 읽는 눈을 뺏는다. */
.industry-line {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0;
  margin-top: var(--s-9); font-size: 14px; color: var(--text-faint);
}
.industry-line span + span::before { content: "·"; margin-inline: 12px; color: var(--line-strong); }

/* ══ 첫 화면 등장 ══
 * 페이지가 열리면 제품명 → 제목 → 설명 → 버튼 → 칩 → 화면 사진 차례로 떠오른다.
 * ★한 번에 잘 짜인 등장 하나가 흩어진 잔재주 열 개보다 낫다. 첫 화면 말고는 스크롤
 *   진입(components.css)만 쓴다. `both` 라서 스크립트와 무관하게 CSS 만으로 돈다. */
.hero__product, .hero__title, .hero__lead, .hero__ctas, .hero__inner .chips, .hero__note {
  animation: rise .9s var(--ease) both;
}
.hero__title { animation-delay: .08s; }
.hero__lead { animation-delay: .18s; }
.hero__ctas { animation-delay: .28s; }
.hero__inner .chips { animation-delay: .38s; }
.hero__note { animation-delay: .46s; }
.shotpoints li { animation: rise .8s var(--ease) both; animation-delay: calc(.95s + var(--i, 0) * .08s); }
.shotpoints li:nth-child(2) { --i: 1; }
.shotpoints li:nth-child(3) { --i: 2; }
/* 뒤의 빛무리는 아주 천천히 숨 쉰다. 눈에 띄면 안 되고, 없으면 허전한 정도. */
.hero__glow { animation: glow-drift 14s ease-in-out infinite alternate; }
@keyframes glow-drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); opacity: .9; }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); opacity: 1; }
}

@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); }
}
@media (max-width: 640px) {
  .hero__ctas { flex-direction: column; }
  .hmon figcaption { margin-top: 26px; }
  .shotpoints { grid-template-columns: 1fr; gap: var(--s-4); }
  .hl__item { grid-template-columns: 48px 1fr; gap: var(--s-4); padding-block: var(--s-6); }
  .hl__icon { width: 48px; height: 48px; }
  .hl__icon .ico { width: 22px; height: 22px; }
  .hl__body { font-size: 17px; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding-left: var(--s-4); }
}