/* ===========================================================================
   분해도 — 번호 고리 · 핑 · 부품 목록

   3D 위에 얹는 표시는 한 가지 말씨로 쓴다. 파란색은 화면 글자(UI)에만 있다 —
   지시선 · 번호 고리 · 부품 목록의 번호. 기계에는 파란 빛을 얹지 않는다.

     번호 고리   지금 단계의 번호. 넓은 화면에서는 지시선 끝에, 좁은 화면에서는
                 지시선 대신 그 부품 위에 앉는다.
     핑          선이 부품에 닿을 때(좁은 화면은 단계가 바뀔 때) 고리에서 한 번
                 퍼지고 사라진다. 되풀이하지 않는다.
     부품 목록   다 벌어진 순간에 여섯 모듈의 이름이 부품 위에 잠깐 뜬다.
                 장 목록이 뜨기(0.25) 전에 걷힌다. 넓은 화면에서만.

   자리 · 불투명도 · 켜고 끄기는 anatomy-callout.js · anatomy-callout-index.js 가
   정한다. 여기서는 모양만 잡는다. 움직임은 transform 과 opacity 로만 한다 —
   레이아웃을 다시 계산하지 않게.

   무엇을 하지 않는가:
     · '모션 최소화'와 정지 모양(is-static)에서는 아무것도 보이지 않는다. 기본이
       display:none 이고, 재생 모양 안에서만 켠다.
     · 흐림(backdrop-filter)을 쓰지 않는다. 바뀌는 캔버스 위에서 여섯 곳을 매
       프레임 다시 흐리게 만든다.
     · 빛 번짐(glow)이나 겨누는 표시(조준선)를 두지 않는다.
   z-index 는 1 이다. 글(2)이 언제나 위에 온다.
   =========================================================================== */

.anatomy__ring,
.anatomy__index,
.anatomy__ping {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* ── 번호 고리 ─────────────────────────────────────────── */

  html.js .anatomy:not(.is-static) .anatomy__ring {
    display: grid;
    place-items: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 1.25px solid var(--nx-accent-dark);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font: 600 10.5px/1 var(--nx-font-mono);
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    will-change: transform, opacity;
  }

  html.js .anatomy:not(.is-static) .anatomy__ring.is-on {
    opacity: 1;
  }

  .anatomy__ring b {
    font: inherit;
  }

  /* ── 핑 ─────────────────────────────────────────────────
     1px 고리 하나가 2.3 배로 퍼지며 사라진다(0.5초, 한 번).
     넓은 화면은 지시선 안의 원, 좁은 화면은 번호 고리 자신(::after)이다. */

  html.js .anatomy:not(.is-static) .anatomy__ring::after {
    content: "";
    position: absolute;
    inset: -1.25px;
    border: 1px solid var(--nx-accent-dark);
    border-radius: 50%;
    opacity: 0;
  }

  html.js .anatomy:not(.is-static) .anatomy__ring.is-ping::after {
    animation: anatomy-ping 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  /* anatomy-live.css 의 '지시선 원' 규칙(채움 · 번짐)을 덮는다. 핑은 선만 있다. */
  html.js .anatomy:not(.is-static) .anatomy__leader .anatomy__ping {
    display: inline;
    fill: none;
    stroke: var(--nx-accent-dark);
    stroke-width: 1;
    filter: none;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
  }

  html.js .anatomy:not(.is-static) .anatomy__leader .anatomy__ping.is-ping {
    animation: anatomy-ping 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  @keyframes anatomy-ping {
    from { transform: scale(1); opacity: 0.6; }
    to { transform: scale(2.3); opacity: 0; }
  }
}

/* ── 부품 목록 (넓은 화면만) ──────────────────────────────── */

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  /* 뜨는 동안(0.16~0.25)만 그린다. 꺼 두면 장 목록이 바뀔 때마다 다시 계산하는
     스타일에서 이 30여 개 요소가 빠진다. */
  html.js .anatomy:not(.is-static) .anatomy__index.is-on {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }

  /* 꺾은선 표식. 기준점에 놓인 크기 없는 점이고, 점 · 세로선 · 가로선이 거기서
     뻗는다. 선은 1px 상자를 transform 의 scale 로 늘인다 — 크기를 바꾸면 레이아웃을
     다시 계산하지만 transform 은 그렇지 않다. */
  .anatomy__mark {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
  }

  .anatomy__mark.is-on {
    visibility: visible;
  }

  .anatomy__mark::before {
    content: "";
    position: absolute;
    left: -2.5px;
    top: -2.5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nx-accent-dark);
  }

  .anatomy__mark i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    transform-origin: 0 0;
    transform: scale(0);
  }

  /* 이름표. 띄우지 않는 것은 그리지도 않는다(visibility). 크기는 resize 때 목록을
     잠깐 켜고 잰다(anatomy-callout-index.js). */
  .anatomy__tag {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    height: 26px;
    padding: 0 11px 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--nx-r-pill);
    background: rgba(8, 10, 14, 0.78);
    color: #fff;
    font: 600 13px/1 var(--nx-font-sans);
    letter-spacing: -0.01em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
  }

  .anatomy__tag.is-on {
    visibility: visible;
    will-change: transform, opacity;
  }

  .anatomy__tag b {
    font: 600 11px/1 var(--nx-font-mono);
    color: var(--nx-accent-dark);
    letter-spacing: 0.02em;
  }

  /* 이름표끼리 비킬 자리가 없을 때는 번호만 남긴다. 이름 글자를 0 크기로 접는다. */
  .anatomy__tag.is-short {
    gap: 0;
    padding: 0 8px;
    font-size: 0;
  }
}