/* 지구본 앞 숫자 구간 (직접 설계)
   · 가운데 축 하나에 모은다 — 숫자는 축 왼쪽, 설명은 축 오른쪽(좌우 대칭), 구분선 위에 축 점
   · 글자 뒤는 가장자리가 번지는 어두운 막으로 눌러, 지구본의 이동선·도시 이름·점이 글자를 가리지 않게 한다 */
.stat-zone { position: relative; z-index: 2; padding-top: 70vh; padding-bottom: 4vh; color: #fff; }   /* 위쪽 여백 = 지구본만 크게 보이며 여행하는 장면(원본처럼 제목은 화면 맨 아래에서 막 올라옴) */
.stat-track { height: calc(100vh - 76px + 130px); }   /* 고정 시간 = 스크롤 한 번(휠 한 칸 ≈ 100px) 조금 넘게만 멈추고, 한 번 더 하면 내려간다 */
.stat-pin { position: sticky; top: 76px; height: calc(100vh - 76px); display: flex; flex-direction: column; justify-content: center; }   /* 헤더 아래 한 화면 */
.stat-pin::before { content: ""; position: absolute; z-index: -1; inset: -4vh -2vw; pointer-events: none;
  background: radial-gradient(ellipse 46% 50% at 50% 50%, rgba(3,5,8,.9) 0%, rgba(3,5,8,.8) 52%, rgba(3,5,8,.45) 76%, rgba(3,5,8,0) 100%); }   /* 글자 뒤 어두운 막(대표 지시: 이 진하기 유지, 더 진하게는 하지 않음) */
.stat-head h2, .stat-no, .stat-tit { text-shadow: 0 0 16px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.55); }
.stat-head .grad-text { text-shadow: none; }   /* 그라데이션 글자는 그림자가 비쳐 탁해지므로 제외 */

.stat-head { text-align: center; }
/* 제목+숫자 3줄이 화면 한 장(헤더 제외)에 다 들어오도록 모든 크기를 화면 높이(vh) 기준으로 잡는다 */
.stat-label { display: block; padding-bottom: 1.6vh; font-family: var(--e-font); font-size: 14px; font-weight: 600; letter-spacing: .18em; color: var(--acc2, #1fa3eb); }
.stat-head h2 { margin: 0 auto; font-size: min(3.7vw, 6.1vh); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; word-break: keep-all; }
/* 원본처럼 거리를 둔다: 제목과 숫자 사이를 넓게, 숫자는 줄 왼쪽, 설명은 줄의 정확히 가운데부터, 줄 간격은 넉넉하게 */
.stat-row { width: min(800px, 90%); margin: 6.5vh auto 0; }
.stat-row li { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 0; padding: 3.5vh 0; border-bottom: 1px solid rgba(255,255,255,.72); }
.stat-row li::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--acc1, #1febd1); box-shadow: 0 0 10px var(--acc1, #1febd1); }
.stat-no { position: relative; justify-self: start; padding-left: 7%; display: inline-flex; align-items: baseline; font-family: var(--e-font); font-weight: 700; font-size: min(5vw, 9vh); line-height: 1; letter-spacing: -.02em; }
.stat-no .u { padding-left: 6px; font-size: .36em; font-weight: 700; letter-spacing: 0; }
.stat-txt { text-align: left; }
.stat-tit { font-size: clamp(16px, 2.4vh, 22px); font-weight: 700; letter-spacing: -.01em; }
.stat-desc { padding-top: .8vh; font-size: clamp(14px, 2vh, 17px); font-weight: 500; line-height: 1.5; letter-spacing: 0; color: #fff; text-shadow: 0 0 12px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6); }

@media (max-width: 900px) {
  .stat-zone { padding-top: 40vh; padding-bottom: 6vh; }
  .stat-pin::before { background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(3,5,8,.9) 0%, rgba(3,5,8,.8) 55%, rgba(3,5,8,0) 100%); }
  .stat-row { margin-top: 56px; }
  .stat-row li { column-gap: 28px; padding: 26px 0; }
  .stat-tit { font-size: 18px; }
  .stat-desc { font-size: 14px; }
}
@media (max-width: 520px) {
  .stat-track { height: auto; }
  .stat-pin { position: relative; top: auto; height: auto; padding: 4vh 0; }   /* 아주 작은 화면은 줄이 길어져 한 화면에 안 들어가므로 고정 없이 흐르게 */
  .stat-row li { grid-template-columns: 1fr; row-gap: 12px; text-align: center; }
  .stat-no { justify-self: center; padding-left: 0; }
  .stat-txt { text-align: center; }
}