/* ── 강점 목록 «구 · 나선 3D 갤러리» (sphere · 문서 41 · 123 · 2026-10-29) ─────────────────────────────
   기본(스크립트 없음 · 3D 를 모르는 브라우저)은 gl-blocks.css 의 «사진 격자» 다. gl-sphere.js 가 반지름 · 자리를 재어 is-sphere-3d 를 달면 여기가 켜진다 —
   목록(.why-sphere-list)은 rotateX(--gl-sphere-rx) rotateY(--gl-sphere-ry) 로 통째 돌고(값은 스크립트가 매 프레임 · 저절로 돌기 · 끌기 · 앞으로 부르기 모두 스크립트가 보간),
   사진마다 자리 transform(구: rotateY(θ) rotateX(φ) translateZ(r) · 나선: rotateY(θ) translateY(y) translateZ(r))은 스크립트가 style 에 쓴다(수가 많아 CSS 변수로 두지 않는다).
   깊이(--gl-sphere-d · 0 뒤 ~ 1 앞)는 스크립트가 주고 opacity 는 여기서 계산한다. 앞에 부른 장(is-front)은 커지고 글(figcaption)이 드러난다.
   🔴 움직이는 것은 transform · opacity 뿐. 세로로 미는 손은 페이지가 받는다(touch-action: pan-y). «움직임 줄이기» 는 저절로 돌지 않고(스크립트) 전환도 없다. 색은 역할 토큰만. */
.why-sphere.is-sphere-3d { --gl-sphere-w: 150px; --gl-sphere-h: 560px; }
.why-sphere.is-sphere-3d .why-sphere-stage { display: grid; place-items: center; height: var(--gl-sphere-h); overflow: hidden; perspective: 1500px; perspective-origin: 50% 46%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: var(--r-md, 18px); outline: none; }
.why-sphere.is-sphere-3d .why-sphere-stage:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.why-sphere.is-sphere-3d.is-sphere-drag .why-sphere-stage { cursor: grabbing; }
.why-sphere.is-sphere-3d .why-sphere-list { display: block; position: relative; width: 0; height: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d;
  transform: rotateX(var(--gl-sphere-rx, 0deg)) rotateY(var(--gl-sphere-ry, 0deg)); }
.why-sphere.is-sphere-3d .why-sphere-item { position: absolute; left: 0; top: 0; width: var(--gl-sphere-w); height: calc(var(--gl-sphere-w) * .75); margin: calc(var(--gl-sphere-w) * -.375) 0 0 calc(var(--gl-sphere-w) / -2); transform-style: preserve-3d;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: calc(.18 + .82 * var(--gl-sphere-d, 1)); cursor: pointer;
  transition: opacity .25s linear; }
.why-sphere.is-sphere-3d .why-sphere-fig { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-sm, 10px); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-soft); transform: scale(var(--gl-sphere-s, 1)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.why-sphere.is-sphere-3d .why-sphere-fig img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* 나선은 뒷면도 비친다(옅게) — 나사의 건너편이 보여야 나선으로 읽힌다. 구는 등을 숨긴다 */
.why-sphere[data-shape="helix"].is-sphere-3d .why-sphere-item { backface-visibility: visible; -webkit-backface-visibility: visible; }
.why-sphere.is-sphere-3d .why-sphere-item.is-front { --gl-sphere-s: 1.22; }
.why-sphere.is-sphere-3d .why-sphere-item.is-front .why-sphere-fig { box-shadow: var(--shadow); }
.why-sphere.is-sphere-3d .why-sphere-item.is-front .why-sphere-fig { outline: 3px solid var(--accent); outline-offset: -3px; }
/* 글 — 3D 안의 figcaption 은 숨기고(옆 칸 평면에 가려진다), 앞 장의 글을 스크립트가 무대 아래 한 줄(.why-sphere-live · aria-hidden)로 베껴 보인다 */
.why-sphere.is-sphere-3d .why-sphere-cap { display: none; }
.why-sphere-live { min-height: 52px; margin-top: 14px; text-align: center; }
.why-sphere-live b { display: block; font-size: 17px; color: var(--fg-strong); }
.why-sphere-live span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.why-sphere-live.is-live-in { animation: gl-sphere-live .4s ease both; }
@keyframes gl-sphere-live { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.why-sphere-nav { justify-content: center; margin-top: 12px; }
.why-sphere-nav[hidden] { display: none; }
.why-sphere-count { min-width: 4.5em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-strong); }
.why-sphere-pause[hidden] { display: none; }
@media (max-width: 720px) {
  .why-sphere.is-sphere-3d { --gl-sphere-w: 104px; --gl-sphere-h: 440px; }
  .why-sphere.is-sphere-3d .why-sphere-stage { perspective: 1000px; }
}
@media (prefers-reduced-motion: reduce) {
  .why-sphere.is-sphere-3d .why-sphere-item, .why-sphere.is-sphere-3d .why-sphere-fig { transition: none; }
  .why-sphere-live.is-live-in { animation: none; }
}