/* ===========================================================================
   분해도 — 스크롤하면 갈라지는 기계와, 한 단계씩 켜지는 설명

   두 가지 모습이 있다.

     정지   3D 가 없을 때(모션 최소화 · WebGL 없음 · 스크립트 없음). 보통의
            검은 섹션이다. 여섯 단계가 카드로 나란히 놓이고 설명이 다 보인다.
     재생   3D 가 있을 때. 섹션을 길게 늘여 스크롤 길이를 만들고, 무대를 화면에
            붙인다(sticky). 왼쪽에 장 목록, 지금 짚는 단계만 펼쳐진다.

   재생 모양을 기본으로 둔다(JS 가 있고 모션을 허용할 때). 3D 를 못 띄우면
   anatomy3d.js 가 is-static 을 붙여 정지 모양으로 접는다. 반대로 하면 3D 가
   뜨는 순간 섹션 높이가 몇 배로 늘어나 스크롤 위치가 튄다.
   =========================================================================== */

.anatomy {
  position: relative;
  background: var(--nx-bg-abyss);
  color: var(--nx-text-invert);
  /* 지시선 · 목록이 쓰는 값. 넓은 화면에서 왼쪽 글 기둥의 폭이다. */
  --anatomy-col: min(380px, 34vw);
  --anatomy-top: calc(var(--nx-header-h) + var(--nx-localnav-h));
}

/* 휴대폰에서는 검은 상단바가 스크롤과 함께 사라지고 로컬 내비만 붙는다
   (chrome.css). 무대도 그 바로 아래에 붙인다. */
@media (max-width: 980px) {
  .anatomy {
    --anatomy-top: var(--nx-localnav-h);
  }
}

.anatomy__stage {
  position: relative;
  padding: var(--nx-sp-24) var(--nx-sp-6) var(--nx-sp-16);
  max-width: var(--nx-container-wide);
  margin-inline: auto;
}

.anatomy__canvas {
  display: none;
}

/* ── 머리 ─────────────────────────────────────────────── */

.anatomy__head {
  max-width: 760px;
  margin: 0 auto var(--nx-sp-12);
  text-align: center;
}

.anatomy__title {
  margin-top: var(--nx-sp-3);
  font-size: var(--nx-fs-3xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--nx-tracking-tight);
  word-break: keep-all;
}

.anatomy__lead {
  margin-top: var(--nx-sp-5);
  font-size: var(--nx-fs-md);
  line-height: 1.55;
  color: var(--nx-text-invert-2);
  word-break: keep-all;
  text-wrap: balance;
}

.anatomy__hint {
  display: none;
}

/* ── 단계 (정지: 카드 격자) ──────────────────────────────── */

.anatomy__steps {
  display: grid;
  /* 여섯 장이라 3 x 2 로 딱 떨어지게 둔다. auto-fit 이면 넓은 화면에서 4 + 2 로
     갈라져 마지막 줄이 비어 보인다. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nx-sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.anatomy__step {
  padding: var(--nx-sp-6);
  border-radius: var(--nx-r-lg);
  background: var(--nx-s-dark);
}

.anatomy__jump {
  display: flex;
  align-items: baseline;
  gap: var(--nx-sp-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.anatomy__no {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-xs);
  font-weight: 500;
  color: var(--nx-accent-dark);
}

.anatomy__name {
  font-size: var(--nx-fs-lg);
  font-weight: 600;
  letter-spacing: var(--nx-tracking);
}

.anatomy__body {
  margin-top: var(--nx-sp-3);
  font-size: var(--nx-fs-base);
  line-height: 1.6;
  color: var(--nx-text-invert-2);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.anatomy__modules {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nx-sp-2);
  margin-top: var(--nx-sp-4);
  font-size: var(--nx-fs-xs);
  color: var(--nx-text-invert-2);
}

.anatomy__modules code {
  padding: 3px 8px;
  border-radius: var(--nx-r-pill);
  background: rgba(41, 151, 255, 0.14);
  color: var(--nx-accent-dark);
  font-family: var(--nx-font-mono);
  font-size: 11px;
}

.anatomy__outro {
  max-width: 640px;
  margin: var(--nx-sp-16) auto 0;
  text-align: center;
}

.anatomy__outro-title {
  font-size: var(--nx-fs-2xl);
  font-weight: 700;
  letter-spacing: var(--nx-tracking-tight);
}

.anatomy__outro-body {
  margin: var(--nx-sp-4) 0 var(--nx-sp-5);
  color: var(--nx-text-invert-2);
  line-height: 1.6;
  word-break: keep-all;
  text-wrap: balance;
}

.anatomy__leader,
.anatomy__progress {
  display: none;
}

.anatomy__note {
  margin: var(--nx-sp-10) 0 0;
  font-size: var(--nx-fs-xs);
  color: var(--nx-text-invert-2);
  text-align: center;
}

@media (max-width: 899px) {
  .anatomy__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .anatomy__steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 재생 모양 · 좁은 화면 ──────────────────────────────
   anatomy-live.css 의 짝이다(300줄 제한으로 나눴다). 지금 단계 하나만
   아래 카드로 띄우고, 기계는 3D 쪽에서 위로 올린다.
   이 파일은 anatomy-live.css 보다 먼저 링크된다. 같은 세기의 선택자면 뒤의
   재생 규칙이 이기므로 body 를 더해 한 단계 세게 둔다. */

@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  html.js body .anatomy:not(.is-static) {
    height: 480vh;
  }

  html.js body .anatomy:not(.is-static) .anatomy__stage::before {
    inset: auto 0 0 0;
    width: auto;
    height: 46%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
  }

  html.js body .anatomy:not(.is-static) .anatomy__steps {
    left: var(--nx-sp-4);
    right: var(--nx-sp-4);
    width: auto;
    top: auto;
    bottom: var(--nx-sp-6);
    transform: none;
  }

  html.js body .anatomy:not(.is-static) .anatomy__step {
    display: none;
    border-left: 0;
    padding: 0;
  }

  html.js body .anatomy:not(.is-static) .anatomy__step.is-active {
    display: block;
  }

  html.js body .anatomy:not(.is-static) .anatomy__name { font-size: var(--nx-fs-xl); }

  html.js body .anatomy:not(.is-static) .anatomy__detail,
  html.js body .anatomy:not(.is-static) .anatomy__step.is-active .anatomy__detail {
    grid-template-rows: 1fr 1fr;
  }

  html.js body .anatomy:not(.is-static) .anatomy__leader { display: none; }

  /* 휴대폰에서는 아래 카드와 겹친다. 맨 위 오른쪽으로 올린다. */
  html.js body .anatomy:not(.is-static) .anatomy__note {
    top: var(--nx-sp-3);
    bottom: auto;
    left: var(--nx-sp-4);
    right: var(--nx-sp-4);
    font-size: 11px;
  }
}