/* Hero globe background — 애플 지구본 배경화면풍의 히어로 배경 효과.
   NASA Blue Marble(퍼블릭 도메인, Wikimedia Commons 경유) 정사각형 근사 텍스처를
   원형으로 잘라 표시한다. 입체 음영은 inset box-shadow.
   이후 Three.js 기반 진짜 3D 버전으로 교체할 때는 이 파일만 바꿔 끼우면 된다.
   index.html에서 home.css 다음 줄에 <link>로 연결되어 있다. 마크업은
   .hero-background 안:
   <div class="hero-globe" aria-hidden="true">
     <div class="hero-globe-surface"></div>
   </div>
   지구본 원(.hero-globe)은 크기가 고정이고, 실제 지도 텍스처는 안쪽의
   .hero-globe-surface에 있어서 이동/줌인아웃이 원 자체가 아니라 "지도 위
   특정 지점"에서만 일어난다. */

/* 지구본 원의 크기와 세로 중심. 같은 원에 겹쳐야 하는 요소들(.hero-globe, 그 위의
   국기·카드 링 레이어 .hero-globe-hud, 환영 문구 링, 궤도 장식)이 모두 이 값을 공유해서
   항상 정확히 같은 자리에 놓인다. 세로로 쌓이는 좁은 화면에서는 아래
   "좁은 화면 스테이지" 규칙이 --hero-globe-top을 섹션 상단 기준으로 바꾼다. */
.hero-section {
  --hero-globe-size: min(640px, 62vw);
  --hero-globe-top: 50%;
}

.hero-globe {
  position: absolute;
  top: var(--hero-globe-top);
  left: 50%;
  /* --globe-zoom-scale: 언어 선택 화면에서 휠·핀치로 확대하면 hero-globe-3d.js가 원 자체를
     키워 화면을 채운다(.hero-globe-hud도 같은 값으로 함께 커진다) */
  transform: translate(-50%, -50%) scale(var(--globe-zoom-scale, 1));
  width: var(--hero-globe-size);
  height: var(--hero-globe-size);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  box-shadow:
    inset -50px -35px 90px rgba(0, 0, 0, 0.55),
    inset 25px 20px 70px rgba(255, 255, 255, 0.2),
    0 0 100px rgba(47, 164, 184, 0.35);
  /* .hero-overlay가 z-index:2라 DOM 순서와 무관하게 항상 위를 덮어버리므로,
     지구본은 그보다 높은 z-index를 줘서 오버레이에 가려지지 않게 한다.
     (hero-content는 부모인 .hero-section에서 별도 z-index:3 스택을 이루므로
     이 값을 올려도 실제 텍스트 콘텐츠 위로 튀어나오지 않는다) */
  z-index: 3;
}

/* 인트로: hero-globe-3d.js가 점 크기에서 펼치기 시작할 때(.is-grown)까지 지구본을 0 크기로 숨겨 둔다.
   WebGL이 없으면 has-webgl이 빠지므로 평면 폴백은 원래 크기로 보인다. */
html.has-webgl:not(.hero-landed) .hero-globe:not(.is-grown) {
  transform: translate(-50%, -50%) scale(0);
}

.hero-globe-surface {
  position: absolute;
  inset: 0;
  /* 실제 지구 사진(NASA Blue Marble, 공개 도메인). 가로 2:1 비율이라
     background-size를 200% 100%로 주면 정사각형 지구본에 딱 맞게 늘어난다.
     기본 표시 위치는 대한민국(약 127°E)이며, 언어를 바꾸면 home.js의
     moveHeroGlobeToLanguage()가 background-position으로 그 나라까지 이동시킨
     다음, 도착한 자리에서 scale로 줌인하고 그 상태를 유지한다
     (지구본 원 자체는 항상 같은 크기를 유지한다) */
  background-image: url('../assets/earth-texture.jpg');
  background-repeat: repeat-x;
  background-size: 200% 100%;
  background-position: 120.6% 0;
  /* 도착한 나라가 원의 약 80%를 채우도록 home.js가 나라별 실제 경도 폭 기준으로
     계산한 배율. 텍스처 해상도상 너무 작은 나라(예: 한국)는 과도한 확대로
     깨져 보이지 않도록 상한(2.8배)을 clamp 해뒀다 */
  --globe-landing-scale: 1.35;
  transform: scale(1);
  transform-origin: center center;
  transition:
    background-position 1.1s ease-in-out,
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-globe-surface.is-landing {
  transform: scale(var(--globe-landing-scale));
}

/* 야간 지역의 도시 불빛(NASA Black Marble). .hero-globe-surface의 자식이라
   부모의 pan(background-position)·줌(transform: scale) 애니메이션을 그대로
   물려받아 주간 텍스처와 항상 같은 지점을 가리킨다(위치 동기화는 home.js가
   두 레이어의 background-position을 함께 갱신하는 방식으로 보장한다).
   mix-blend-mode:screen으로 어두운 바탕 위에 불빛만 밝게 겹쳐 보이게 하고,
   mask-image로 ::before와 동일한 명암 경계(--globe-terminator-angle)를 써서
   밤인 쪽에서만 보이도록 잘라낸다. */
.hero-globe-lights {
  position: absolute;
  inset: 0;
  background-image: url('../assets/earth-lights.jpg');
  background-repeat: repeat-x;
  background-size: 200% 100%;
  background-position: 120.6% 0;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(var(--globe-terminator-angle, 180deg), transparent 42%, black 58%);
  mask-image: linear-gradient(var(--globe-terminator-angle, 180deg), transparent 42%, black 58%);
  transition: background-position 1.1s ease-in-out;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-globe-lights {
    transition: none;
  }
}

/* WebGL 환경에서는 hero-globe-3d.js가 초기화되기 전에 평면(2D) 폴백 레이어와
   조명, 핀이 화면에 번쩍 노출되었다가 사라지는 깜빡임(FOUC)을 사전에 차단한다.
   인트로(블루프린트) 동안은 원 자체를 칠하지 않고 입체 음영도 꺼서, 뒤의 우주 배경이 비치는 투명한 구에
   흰 윤곽선(::before)과 흰 점선 위경도선만 보이게 한다. 그 위로 위성 텍스처가 북동쪽부터 입혀지고, 다 입혀지면
   hero-globe-3d.js가 .is-textured를 붙여 다크 바탕과 입체 음영을 1.4s에 걸쳐 되살린다. */
html.has-webgl .hero-globe {
  background-color: #050e19;
  transition: background-color 1.4s ease, box-shadow 1.4s ease;
}

html.has-webgl .hero-globe:not(.is-textured) {
  background-color: transparent;
  box-shadow: none;
}

html.has-webgl .hero-globe-surface,
html.has-webgl .hero-globe-pin,
.hero-globe.hero-globe-3d-active .hero-globe-surface {
  display: none;
}

/* 평면 폴백에서의 수도 핀포인트. 언어가 바뀌면 home.js가 .hero-globe-surface를
   해당 국가가 원의 중앙 부근을 채우도록 pan/zoom하므로, 핀은 원 중앙에 고정해
   두는 것만으로 "선택된 언어의 수도" 위치를 근사적으로 가리킬 수 있다.
   실제 3D 버전이 활성화되면(.hero-globe-3d-active) 구체 위의 진짜 3D 마커가
   대신 표시되므로 이 핀은 숨긴다.
   .is-landing 클래스는 home.js가 .hero-globe-surface의 줌인/줌아웃과 같은
   타이밍에 토글해서, 지도가 확대되는 동안 핀은 반비례로 작아진다(카메라가
   가까워지는 3D 버전과 달리 배경 이미지가 그냥 커지는 것뿐이라, 핀까지 같이
   커지면 과도하게 두드러져 보이므로 반대로 줄인다). */
.hero-globe-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: #39ff14;
  opacity: 0.7;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 10px rgba(57, 255, 20, 0.85);
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-globe-pin.is-landing {
  transform: translate(-50%, -50%) scale(0.6);
}

.hero-globe-pin::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(57, 255, 20, 0.6);
  animation: hero-globe-pin-pulse 2.2s ease-out infinite;
}

@keyframes hero-globe-pin-pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.hero-globe.hero-globe-3d-active .hero-globe-pin {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-globe-pin::after {
    animation: none;
  }
}

.hero-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 한국 착지 시 재생되는 구글어스스튜디오 영상. 기본적으로 투명하게 숨겨뒀다가
   hero-globe-3d.js가 moveToLanguage('ko') 착지(줌인 완료) 시점에
   .is-visible을 붙여 지구본(캔버스) 위로 페이드인시키고 재생한다. */
.hero-globe-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.hero-globe-video.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-globe-video {
    transition: none;
  }
}

.hero-globe::before {
  /* 애플 지구본처럼 "현재 태양 위치"에 따른 주야간 경계 + "현재 좌표 기상"에
     따른 구름층. 값은 home.js의 renderHeroGlobeSky()가 실시간으로 계산해
     CSS 변수(--globe-terminator-angle 등)로 넘겨준다. JS가 아직 실행되지
     않았거나 실패한 경우를 대비해 기본값도 지정해둔다.
     z-index가 없으면(auto) ::before는 항상 실제 자식보다 먼저(더 아래에)
     그려지므로, 불투명한 .hero-globe-surface/.hero-globe-canvas에 완전히
     가려져 보이지 않는다 — 그래서 명시적으로 z-index를 줘서 그 위로 끌어올린다. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      var(--globe-terminator-angle, 180deg),
      rgba(6, 10, 26, 0) 42%,
      rgba(6, 10, 26, var(--globe-night-opacity, 0.35)) 58%
    ),
    radial-gradient(circle at 28% 32%, rgba(255, 255, 255, var(--globe-cloud-opacity, 0.2)), transparent 55%),
    radial-gradient(circle at 68% 62%, rgba(255, 255, 255, var(--globe-cloud-opacity, 0.2)), transparent 55%);
  transition: background 1.5s ease;
  pointer-events: none;
}

/* 3D 지구본은 셰이더가 실제 태양 위치로 픽셀마다 주야간을 계산하므로 평면 폴백용 명암 막과
   구름 얼룩은 쓰지 않는다. 대신 WebGL 환경의 ::before는 인트로 블루프린트의 투명한 구 윤곽이 된다:
   바탕은 칠하지 않고 가는 흰 윤곽선만 그린다. z-index를 풀어 3D 캔버스(흰 점선 위경도선)보다 아래에 깔고,
   위성 텍스처가 다 입혀지면(.is-textured) 걷어낸다. */
html.has-webgl .hero-globe::before,
.hero-globe.hero-globe-3d-active::before {
  z-index: auto;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  opacity: 1;
  transition: opacity 1.4s ease;
}

html.has-webgl .hero-globe.is-textured::before,
.hero-globe.hero-globe-3d-active.is-textured::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.has-webgl .hero-globe,
  html.has-webgl .hero-globe::before {
    transition: none;
  }
}

.hero-globe::after {
  /* 대기광 테두리 */
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  box-shadow: 0 0 60px 12px rgba(120, 200, 220, 0.25);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-globe-surface {
    transition: none;
  }
}

/* 지구본을 중심으로 대각선으로 기울어진 태양계 궤도 느낌의 장식 배경.
   각 .hero-orbit은 원(border-radius:50%)을 세로로 납작하게(scaleY) 눌러
   타원처럼 보이게 하고, 부모 .hero-orbits 전체를 기울여(rotate) 대각선
   방향으로 놓는다. 궤도를 도는 점(.hero-orbit-planet)은 눌린 좌표계 안에서
   회전(.hero-orbit-spin)해야 타원 경로를 따라 움직이므로, 점 자체는 눌린
   비율의 역수만큼 다시 늘려(scaleY) 찌그러지지 않고 원형을 유지하게 한다.
   .hero-globe보다 z-index가 낮아 지구본 뒤로 궤도의 절반이 지나가는 것처럼
   보인다. */
.hero-orbits {
  position: absolute;
  top: var(--hero-globe-top);
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-30deg);
}

.hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(120, 200, 220, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%) scaleY(0.38);
}

.hero-orbit--1 { width: min(760px, 74vw); height: min(760px, 74vw); }
.hero-orbit--2 { width: min(980px, 96vw); height: min(980px, 96vw); }
.hero-orbit--3 { width: min(1200px, 118vw); height: min(1200px, 118vw); }

.hero-orbit-spin {
  position: absolute;
  inset: 0;
  animation: hero-orbit-spin linear infinite;
}

.hero-orbit--1 .hero-orbit-spin { animation-duration: 40s; }
.hero-orbit--2 .hero-orbit-spin { animation-duration: 68s; }
.hero-orbit--3 .hero-orbit-spin { animation-duration: 100s; }

@keyframes hero-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-orbit-planet {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scaleY(2.63); /* .hero-orbit의 scaleY(0.38) 역수 */
  background: rgba(180, 210, 230, 0.6);
  box-shadow: 0 0 6px rgba(180, 210, 230, 0.65);
}

.hero-orbit-planet--amber {
  background: rgba(230, 190, 130, 0.6);
  box-shadow: 0 0 6px rgba(230, 190, 130, 0.6);
}

.hero-orbit-planet--rose {
  background: rgba(220, 160, 170, 0.55);
  box-shadow: 0 0 6px rgba(220, 160, 170, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit-spin {
    animation: none;
  }
}

@media (max-width: 900px) {
  .hero-orbits {
    display: none;
  }
}

/* 언어 선택 화면에서 지구본 주위를 도는 달(hero-globe-3d.js가 만드는 작은 WebGL 캔버스).
   기준점은 지구본 중심이고, 궤도 위치·크기·앞뒤(z-index 2/4)·투명도는 JS가 매 프레임 정한다. */
.hero-moon {
  position: absolute;
  top: var(--hero-globe-top);
  left: 50%;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 10px rgba(205, 220, 240, 0.35));
}

/* 언어 선택 화면의 우주 배경. 밝은 .hero-line-canvas 위, 궤도 장식(z-index 2) 아래에 깔리고,
   국기를 고르면(hero-traveling) 착지 애니메이션(회전 1.6s + 확대 0.9s)이 끝날 즈음에 맞춰
   걷혀서, 지구로 내려앉으며 원래의 밝은 화면이 드러난다. */
.hero-space {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.9s ease-in-out 0.5s, visibility 0s linear 2.4s;
  background:
    url('../assets/space-stars.svg') 0 0 / 1400px 900px repeat,
    url('../assets/space-stars.svg') 610px 340px / 980px 630px repeat,
    radial-gradient(ellipse 55% 45% at 18% 22%, rgba(106, 78, 211, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 84% 78%, rgba(50, 181, 202, 0.16), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 50%, #0d1c36 0%, #070e1f 55%, #03060e 100%);
}

.hero-space::before,
.hero-space::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/space-stars-bright.svg') 0 0 / 1100px 1000px repeat;
  animation: hero-space-twinkle 5.5s ease-in-out infinite alternate;
}

.hero-space::after {
  background-position: 530px 470px;
  animation-duration: 7s;
  animation-delay: -3s;
}

@keyframes hero-space-twinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

html:not(.hero-landed):not(.hero-traveling) .hero-space {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.6s ease;
}

html:not(.hero-landed):not(.hero-traveling) .hero-overlay {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-space::before,
  .hero-space::after {
    animation: none;
  }
}


/* ==========================================================================
   히어로 첫 화면 상태 전환
   <html> 클래스(home.js가 관리). 홈에 들어올 때마다 (없음) 상태로 시작한다:
     (없음)          언어 선택 전 — 지구본 자전 + 수도별 국기만 표시, 상단바·스크롤 잠금
     hero-traveling  국기/드롭다운으로 고른 직후 착지 애니메이션 중 — 국기만 숨김
     hero-landed     착지 완료 — 제목, 환영 문구 링, 통계 카드 링, 식단/포디움 패널 표시
   ========================================================================== */

/* 제목은 자리(레이아웃)를 유지한 채 숨겼다가, 착지하면 원래의 fadeInUp이 처음부터 재생된다.
   (visibility는 안쪽 .lang.lang-visible이 visible로 되돌려버리므로 opacity로 숨긴다) */
html:not(.hero-landed) .hero-title {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

/* 패널·카드 링은 display로 빼 둬야 세로로 쌓이는 좁은 화면에서 빈 공간이 생기지 않고,
   다시 표시되는 순간 각자의 등장 애니메이션(키프레임)이 자연스럽게 시작된다 */
html:not(.hero-landed) .hero-side-panel,
html:not(.hero-landed) .hero-globe-card-ring {
  display: none;
}

html.hero-landed .hero-globe-card-ring {
  animation: hero-card-ring-fade-in 0.8s cubic-bezier(0.2, 0.8, 0.4, 1) both;
}

@keyframes hero-card-ring-fade-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

html.hero-landed .hero-panels {
  animation: hero-panels-fade-in 0.8s cubic-bezier(0.2, 0.8, 0.4, 1) 0.15s both;
}

@keyframes hero-panels-fade-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 언어 선택 전 잠금: 페이지 스크롤을 막고 상단바를 완전히 숨긴다. 착지(hero-landed)하면
   풀리고 상단바가 서서히 나타난다. (키보드 Tab·스크린리더 차단은 home.js가 상단바·아래
   콘텐츠에 inert로 처리) */
html:not(.hero-landed),
html:not(.hero-landed) body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* home.js initHeroVideoAnimation()이 인라인으로 visibility/opacity를 넣으므로 !important로 덮는다.
   visibility로 숨겨 자리는 그대로 두므로 착지 후 나타나도 레이아웃이 밀리지 않는다 */
html:not(.hero-landed) header {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

html.hero-landed header {
  animation: hero-header-in 0.6s ease backwards;
}

@keyframes hero-header-in {
  from {
    opacity: 0;
  }
}

html:not(.hero-landed) .scroll-indicator {
  display: none;
}

/* 평면 폴백의 "선택된 수도" 핀은 아직 아무 언어도 고르지 않은 동안엔 가리킬 곳이 없다 */
html:not(.hero-landed):not(.hero-traveling) .hero-globe-pin {
  display: none;
}

/* 좌우 패널이 카드 링과 거의 동시에 떠오르도록 원래 지연(1s)을 줄인다 */
html.hero-landed .hero-side-panel {
  animation-delay: 0.35s;
}

/* ==========================================================================
   지구본 인터랙션 레이어(.hero-globe-hud)
   .hero-globe와 같은 변수로 정확히 같은 원 위에 겹친다. .hero-globe는 장식용
   (.hero-background 안, aria-hidden)이라 클릭을 받을 수 없으므로, 국기·카드처럼
   눌러야 하는 요소는 .hero-section의 직계 자식인 이 레이어에 둔다.
   ========================================================================== */
.hero-globe-hud {
  position: absolute;
  top: var(--hero-globe-top);
  left: 50%;
  width: var(--hero-globe-size);
  height: var(--hero-globe-size);
  transform: translate(-50%, -50%) scale(var(--globe-zoom-scale, 1));
  /* .hero-content(z-index:3)의 투명한 패널 영역이 국기·카드 클릭을 가로채지 않도록 그 위에 둔다.
     레이어 자체는 클릭을 통과시키고, 국기 레이어·카드만 개별적으로 받는다 */
  z-index: 4;
  pointer-events: none;
  /* 카드 크기·글자 크기를 원 지름 기준(cqw)으로 잡아 화면 폭이 바뀌어도 원 안에 딱 맞게 한다 */
  container-type: inline-size;
}

/* --- 수도별 언어 국기 --------------------------------------------------- */
.hero-globe-flags {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
  /* 드래그 중 국기 이미지·라벨 글자가 선택되거나 길게 누르기 메뉴가 떠서 드래그가 끊기지 않게 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 3D 지구본 초기 진입 시 위도경도 라인 형성 및 텍스처 로딩 전까지 국기 아이콘 레이어를 숨겨
   첫 페인트 시 국기가 번쩍 튀어나왔다 사라지는 깜빡임 증상을 방지한다.
   hero-globe-3d.js에서 3D 투영 준비가 끝나면 .is-projected가 부여되고,
   updateFlags()에서 위도경도 라인이 형성된 후 동경 순으로 부드럽게 팝업 등장한다 */
html.has-webgl .hero-globe-flags:not(.is-projected) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

html.has-webgl .hero-globe-flags:not(.is-projected) .hero-globe-flag {
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-globe-flags img {
  -webkit-user-drag: none;
  pointer-events: none; /* 누름·드래그는 이미지가 아니라 국기 버튼이 받는다 */
}

/* 3D 지구본이 국기 위치를 투영 중일 때만 드래그 회전이 가능하다(hero-globe-3d.js) */
.hero-globe-flags.is-projected {
  cursor: grab;
  touch-action: none; /* 언어 선택 전에는 페이지 스크롤이 잠겨 있으므로 가로·세로 드래그 모두 지구본 회전에 쓴다 */
  transition: none;   /* 3D 투영 중에는 JS가 매 프레임 월드맵 텍스처와 완벽히 동기화하여 투명도를 제어한다 */
}

.hero-globe-flags.is-dragging {
  cursor: grabbing;
}

html.hero-traveling .hero-globe-flags,
html.hero-landed .hero-globe-flags {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* 버튼의 기준점(left/top)은 수도 지점이고, 국기는 그 위로 꼬리(핀)를 달고 서 있다.
   3D에서는 JS가 left/top·opacity·--flag-scale을 매 프레임 갱신하고, WebGL이 없는
   평면 폴백에서는 아래 --flag-x/--flag-y로 원 둘레에 고르게 놓인다. */
.hero-globe-flag {
  --flag-scale: 1;
  position: absolute;
  left: var(--flag-x);
  top: var(--flag-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0 0 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  /* 지구본 원이 커져도(--globe-zoom-scale) 국기는 원래 크기를 유지하도록 그만큼 되돌려 줄인다 */
  transform: translate(-50%, -100%) scale(calc(var(--flag-scale) / var(--globe-zoom-scale, 1)));
  transform-origin: 50% 100%;
  -webkit-tap-highlight-color: transparent;
}

.hero-globe-flag:nth-child(1)  { --flag-x: 50%;   --flag-y: 22%; }
.hero-globe-flag:nth-child(2)  { --flag-x: 65.6%; --flag-y: 25.6%; }
.hero-globe-flag:nth-child(3)  { --flag-x: 78.1%; --flag-y: 35.5%; }
.hero-globe-flag:nth-child(4)  { --flag-x: 85.1%; --flag-y: 50%; }
.hero-globe-flag:nth-child(5)  { --flag-x: 85.1%; --flag-y: 66%; }
.hero-globe-flag:nth-child(6)  { --flag-x: 78.1%; --flag-y: 80.5%; }
.hero-globe-flag:nth-child(7)  { --flag-x: 65.6%; --flag-y: 90.4%; }
.hero-globe-flag:nth-child(8)  { --flag-x: 50%;   --flag-y: 94%; }
.hero-globe-flag:nth-child(9)  { --flag-x: 34.4%; --flag-y: 90.4%; }
.hero-globe-flag:nth-child(10) { --flag-x: 21.9%; --flag-y: 80.5%; }
.hero-globe-flag:nth-child(11) { --flag-x: 14.9%; --flag-y: 66%; }
.hero-globe-flag:nth-child(12) { --flag-x: 14.9%; --flag-y: 50%; }
.hero-globe-flag:nth-child(13) { --flag-x: 21.9%; --flag-y: 35.5%; }
.hero-globe-flag:nth-child(14) { --flag-x: 34.4%; --flag-y: 25.6%; }

/* 수도를 가리키는 꼬리 */
.hero-globe-flag::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(57, 255, 20, 0.9));
}

/* 수도 지점 표시 점(착지 후 3D 마커와 같은 형광 녹색) */
.hero-globe-flag::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 6px rgba(57, 255, 20, 0.9);
}

.hero-globe-flag-badge {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-globe-flag-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-globe-flag-code {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(6, 22, 30, 0.72);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  white-space: nowrap;
}

.hero-globe-flag:hover .hero-globe-flag-badge,
.hero-globe-flag:focus-visible .hero-globe-flag-badge {
  transform: scale(1.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(57, 255, 20, 0.45);
}

.hero-globe-flag:focus-visible {
  outline: none;
  opacity: 1 !important; /* 키보드로 지구 뒤편 국기에 초점이 가도 보이도록(인라인 opacity보다 우선) */
}

/* 지구 뒤편으로 넘어가 거의 안 보이는 국기는 클릭 대상에서 뺀다 */
.hero-globe-flag.is-behind {
  pointer-events: none;
}

/* --- 착지 후: 지구본 둘레를 도는 통계 카드 위성 궤도 링 -------------------
   지구본을 도는 위성처럼 궤도 위에 배치된다.
   궤도는 타원(긴반지름 = 지구본 지름의 약 59.375%, 짧은/긴 = 0.38, -30° 기울기)이고,
   hero-globe-3d.js가 카드 4장의 궤도상 위치(--kx, --ky, --depth, --hole)와 물리 충돌을 실시간 계산한다. */
.hero-globe-card-ring {
  --ring-card: 18cqw;
  --orbit-a: 59.375cqw;
  position: absolute;
  inset: 0;
}

.hero-card-orbit {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--orbit-a) * 2.2); /* viewBox(-110~110)가 긴반지름(100)의 1.1배 여유를 둔다 */
  height: calc(var(--orbit-a) * 2.2);
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
  animation: hero-card-orbit-in 1.2s ease 0.1s backwards;
}

.hero-card-orbit path {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.hero-card-orbit-back {
  stroke: rgba(58, 166, 180, 0.45);
}

.hero-card-orbit-front {
  stroke: rgba(58, 166, 180, 0.75);
}

.hero-globe-card-ring .hero-impact-card {
  position: absolute;
  left: calc(50% + var(--orbit-a) * var(--kx));
  top: calc(50% + var(--orbit-a) * var(--ky));
  width: var(--ring-card);
  height: var(--ring-card);
  scale: var(--depth);
  /* transform은 hover·등장 애니메이션이 쓰므로, 중심 정렬은 음수 margin으로 한다 */
  margin: calc(var(--ring-card) / -2) 0 0 calc(var(--ring-card) / -2);
  padding: 0 1.2cqw;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.52) 55%, rgba(8, 127, 140, 0.32));
  box-shadow:
    0 10px 28px rgba(0, 20, 30, 0.35),
    inset 0 0 0 1px rgba(8, 127, 140, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  pointer-events: auto;
  transition-property: transform, background, border-color, box-shadow;
  animation:
    hero-ring-card-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards,
    hero-satellite-float 6s ease-in-out infinite;
  animation-delay:
    calc(0.25s + var(--ring-i) * 0.12s),
    calc(var(--ring-i) * -1.5s);
}

/* 착지했을 때의 처음 기본 자리. 이후에는 hero-globe-3d.js가 실시간 갱신 */
.hero-globe-card-ring .hero-impact-card:nth-of-type(1) { --kx: 0.7256;  --ky: -0.5883; --depth: 0.88; --hole: 1; --ring-i: 0; }
.hero-globe-card-ring .hero-impact-card:nth-of-type(2) { --kx: 0.8722;  --ky: -0.3343; --depth: 1.04; --hole: 0; --ring-i: 1; }
.hero-globe-card-ring .hero-impact-card:nth-of-type(3) { --kx: -0.7256; --ky: 0.5883;  --depth: 1.04; --hole: 0; --ring-i: 2; }
.hero-globe-card-ring .hero-impact-card:nth-of-type(4) { --kx: -0.8722; --ky: 0.3343;  --depth: 0.88; --hole: 1; --ring-i: 3; }

/* 뒤 궤도 카드(--hole: 1): 지구본 원과 겹치는 부분을 가려 지구 뒤로 넘어가는 것처럼 마스킹 */
.hero-globe-card-ring .hero-impact-card {
  --globe-hole: radial-gradient(
    circle at calc(50% - var(--orbit-a) * var(--kx) / var(--depth)) calc(50% - var(--orbit-a) * var(--ky) / var(--depth)),
    transparent calc(50cqw * var(--hole) / var(--depth)),
    #000 calc(50cqw * var(--hole) / var(--depth) + 1px)
  );
  -webkit-mask-image: var(--globe-hole);
  mask-image: var(--globe-hole);
}

/* 착지 화면에서는 지구본 원 영역을 카드 링 드래그 면으로 연다(모바일 터치 포함) */
html.hero-landed .hero-globe-card-ring.is-draggable {
  pointer-events: auto;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}

html.hero-landed .hero-globe-card-ring.is-draggable.is-dragging {
  cursor: grabbing;
}

.hero-globe-card-ring .hero-impact-card:hover {
  transform: scale(1.08);
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66) 55%, rgba(8, 127, 140, 0.4));
  border-color: rgba(255, 255, 255, 0.95);
}

@keyframes hero-ring-card-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-globe-card-ring .hero-metric-icon {
  width: 4.4cqw;
  height: 4.4cqw;
  margin: 0;
  filter: none;
}

.hero-globe-card-ring .hero-metric-content {
  gap: 0.3cqw;
}

.hero-globe-card-ring .hero-metric-number {
  font-size: clamp(1rem, 5.2cqw, 2.3rem);
}

.hero-globe-card-ring .hero-metric-label {
  max-width: 15.5cqw;
  font-size: clamp(0.56rem, 1.65cqw, 0.8rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-globe-card-ring .hero-impact-card {
    animation: none;
  }
}

/* 좌우 패널이 나란히 놓이는 넓은 화면에서는 제목이 지구본 한가운데(위아래 카드 줄 사이의
   띠)에 오므로, 그 띠(지름의 약 35% 높이, 90% 폭)에 들어가도록 지구본 크기에 비례해 줄이고,
   어두운 지구·영상 위에서도 읽히도록 밝은 글자 + 그림자로 바꾼다. */
@media (min-width: 1401px), (min-width: 1000px) and (max-width: 1400px) and (orientation: landscape) {
  .hero-main .hero-title {
    max-width: calc(var(--hero-globe-size) * 0.9);
    margin-bottom: 0;
    font-size: clamp(1.4rem, calc(var(--hero-globe-size) * 0.072), 3rem);
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 12, 20, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
  }

  .hero-main .hero-title strong {
    color: #8ff0f7;
    text-shadow: 0 2px 14px rgba(0, 12, 20, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
  }
}

/* ==========================================================================
   패널 배치: index.html에서 식단·포디움은 .hero-panels로 묶여 제목(.hero-main) 뒤에 온다.
   넓은 화면에서는 묶음을 display:contents로 없애 두 패널을 .hero-content의 flex 아이템으로
   되돌리고, order로 "식단 | 제목 | 포디움" 순서를 만든다. 휴대폰에서는 아래 규칙으로
   좌우로 넘기는 카드 묶음이 된다.
   ========================================================================== */
.hero-panels {
  display: contents;
}

.daily-menu-overview { order: 1; }
.hero-main { order: 2; }
.research-league-overview { order: 3; }

.hero-panels-dots,
.hero-globe-hint {
  display: none;
}

/* ==========================================================================
   좁은 화면 스테이지: 식단/포디움 패널이 세로로 쌓이는 폭(home.css의 max-width:1400px,
   가로 모드 태블릿 1000~1400px 제외)에서는 패널이 지구본을 가리지 않도록, 지구본과
   카드 링을 섹션 상단에 고정하고 제목·패널을 그 아래로 흘린다. 착지 후 패널이 나타나
   섹션 높이가 늘어나도 지구본 위치가 바뀌지 않는다.
   ========================================================================== */
@media (max-width: 1400px) {
  .hero-section {
    --hero-stage-pad: 88px; /* 고정 헤더 높이만큼 띄움 */
    --hero-globe-size: min(640px, 62vw, 78vh); /* 가로 모드 휴대폰에서도 첫 화면 안에 들어오도록 */
    --hero-globe-top: calc(var(--hero-stage-pad) + var(--hero-globe-size) / 2);
    justify-content: flex-start;
  }

  .hero-main {
    order: -1;
    padding-top: calc(var(--hero-stage-pad) + var(--hero-globe-size) + 1rem);
  }

  /* 세로로 쌓이는 화면(가로 900px 부근 등): 포디움 오버뷰가 식단 오버뷰보다 먼저 오도록 배치 */
  .research-league-overview {
    order: 1;
  }

  .daily-menu-overview {
    order: 2;
  }
}

@media (min-width: 1000px) and (max-width: 1400px) and (orientation: landscape) {
  .hero-section {
    --hero-globe-size: min(500px, 43vw, 68vh);
    --hero-globe-top: 50%;
    justify-content: center;
  }

  .daily-menu-overview {
    order: 1;
  }

  .hero-main {
    order: 2;
    padding-top: 0;
    max-width: calc(var(--hero-globe-size) * 0.9);
  }

  .research-league-overview {
    order: 3;
  }

  .hero-main .hero-title {
    max-width: calc(var(--hero-globe-size) * 0.88);
    font-size: clamp(1.2rem, calc(var(--hero-globe-size) * 0.065), 2.2rem);
  }
}

/* 세로로 쌓이는 화면(휴대폰·세로 태블릿)의 언어 선택 화면: 지구본과 안내 문구를 한 화면
   가운데에 두고, 착지하면 지구본이 위(스테이지 자리)로 미끄러져 올라가며 그 아래에
   제목·패널이 나타난다. */
@media (max-width: 999px), (max-width: 1400px) and (orientation: portrait) {
  .hero-globe,
  .hero-globe-hud,
  .hero-orbits {
    transition: top 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* 위 WebGL 블루프린트 규칙의 transition이 더 구체적이라 top 전환을 덮어쓰지 않도록 함께 적는다 */
  html.has-webgl .hero-globe {
    transition: top 1.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 1.4s ease, box-shadow 1.4s ease;
  }

  .hero-main {
    transition: padding-top 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html:not(.hero-landed):not(.hero-traveling) .hero-section {
    --hero-globe-top: calc(50% - 28px); /* 아래 안내 문구까지 한 덩어리로 가운데 오도록 살짝 위로 */
    min-height: 100vh;
    min-height: 100svh;
  }

  html:not(.hero-landed):not(.hero-traveling) .hero-main {
    padding-top: 0;
  }

  html.hero-traveling .hero-globe-hint,
  html.hero-landed .hero-globe-hint {
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }

  .hero-globe-hint {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: 92vw;
    margin: 0;
    transform: translateX(-50%);
    color: #dcedf1;
    text-shadow: 0 1px 8px rgba(3, 6, 14, 0.8);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    animation: hero-globe-hint-in 0.8s ease 0.8s backwards;
    transition: opacity 0.3s ease;
  }

  /* 확대하기 시작하면 원과 함께 커지며 화면 밖으로 밀려나므로 숨긴다 */
  .hero-globe-hud.is-zoomed .hero-globe-hint {
    opacity: 0;
  }

  .hero-globe-hint span + span {
    color: #9dbcc3;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
}

@keyframes hero-globe-hint-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 600px) {
  .hero-section {
    --hero-globe-size: min(78vw, 360px);
    --hero-stage-pad: 72px;
  }

  /* 작은 화면에 맞춘 궤도 카드 크기 및 텍스트 튜닝 */
  .hero-globe-card-ring {
    --ring-card: 19cqw;
    --orbit-a: 57.5cqw;
  }

  .hero-globe-card-ring .hero-metric-icon {
    display: none;
  }

  .hero-globe-card-ring .hero-metric-number {
    font-size: clamp(0.9rem, 5.2cqw, 1.4rem);
    font-weight: 700;
  }

  .hero-globe-card-ring .hero-metric-label {
    max-width: 15cqw;
    font-size: clamp(0.48rem, 1.4cqw, 0.65rem);
    line-height: 1.1;
  }

  /* 손가락으로 누르기 쉽도록 국기 버튼의 터치 영역을 좌우로 넓힌다(꼬리 아래 기준점은 그대로) */
  .hero-globe-flag {
    padding: 4px 7px 14px;
  }

  .hero-globe-flag-badge {
    width: 30px;
    height: 30px;
  }
}

/* 가로 모드 휴대폰: 화면 높이가 낮아 지구본을 높이에 맞추고, 헤더 바로 아래에 붙인다
   (769px 이상 폭에서는 헤더가 섹션 위에 따로 자리를 차지한다) */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-section,
  html:not(.hero-landed) .hero-section {
    --hero-stage-pad: 12px;
    --hero-globe-size: min(62vw, calc(100vh - 110px));
    --hero-globe-top: calc(var(--hero-stage-pad) + var(--hero-globe-size) / 2);
  }

  .hero-globe-hint {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 768px) {
  .hero-section,
  html:not(.hero-landed) .hero-section {
    --hero-stage-pad: 60px; /* 768px 이하에서는 헤더가 섹션 위에 떠 있다 */
  }
}

/* ==========================================================================
   휴대폰: 식단·포디움을 좌우로 넘기는 카드로 — 다음 카드가 살짝 보여 넘길 수 있음을
   알려주고, 아래 점이 현재 카드를 표시한다(home.js initHeroPanelsPager). 원래 어두운
   영상 배경용이던 흰 글씨를 밝은 카드 위의 어두운 글씨로 바꿔 읽히게 한다.
   ========================================================================== */
@media (max-width: 768px) {
  .hero-panels {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 4px 0 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hero-panels::-webkit-scrollbar {
    display: none;
  }

  .hero-panels .hero-side-panel {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 1.1rem 1rem 1rem;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: 1px solid rgba(8, 127, 140, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(15, 50, 60, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 모바일 스와이프 카드: 리서치 포디움을 1번, 셰프의 추천을 2번 카드로 배치 */
  .hero-panels .research-league-overview {
    order: 1;
  }

  .hero-panels .daily-menu-overview {
    order: 2;
  }

  .hero-panels .hero-side-panel h2,
  .hero-panels #researchLeagueTitle {
    color: #17343b;
    font-size: 1.1rem;
    white-space: normal;
    text-shadow: none;
  }

  .hero-panels .daily-menu-day-label {
    color: #17343b;
    text-shadow: none;
  }

  .hero-panels .daily-menu-day + .daily-menu-day {
    border-top-color: rgba(8, 127, 140, 0.12);
  }

  .hero-panels .daily-menu-row {
    border-color: rgba(8, 127, 140, 0.14);
    border-left-color: #d7a63f;
    background: #fcfaf4;
  }

  .hero-panels .daily-menu-row-label {
    color: #a8721a;
    text-shadow: none;
  }

  /* 한글 메뉴명이 음절 중간에서 끊기지 않게 하고("유린/기s"), 공백 없는 긴 이름은
     renderDailyMenu()가 '&' 뒤에 넣은 줄바꿈 후보(<wbr>)에서 넘긴다 */
  .hero-panels .daily-menu-row-items {
    color: #2b3f44;
    text-shadow: none;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 흰 글씨라 밝은 배경에서 보이지 않고 카드 묶음 아래와 겹친다 — 휴대폰에선 카드가
     아래로 이어지는 콘텐츠를 충분히 보여주므로 숨긴다 */
  .scroll-indicator {
    display: none;
  }

  .hero-panels .daily-menu-empty,
  .hero-panels .research-league-category-count {
    color: #6b7c80;
  }

  /* 위쪽 색 띠(분야별 색)는 그대로 두고 나머지 테두리만 밝은 카드에 맞춘다 */
  .hero-panels .research-league-overview .research-league-card {
    border-right-color: rgba(8, 127, 140, 0.14);
    border-bottom-color: rgba(8, 127, 140, 0.14);
    border-left-color: rgba(8, 127, 140, 0.14);
  }

  .hero-panels .research-league-card-link {
    color: #087f8c;
  }

  html.hero-landed .hero-panels-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: -1.25rem; /* .hero-content의 세로 gap(2rem)을 줄여 카드 바로 아래에 붙인다 */
  }

  .hero-panels-dots span {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: rgba(8, 127, 140, 0.25);
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .hero-panels-dots span.is-active {
    width: 20px;
    background: #087f8c;
  }
}

/* ==========================================================================
   PC(1401px 이상): 통계 카드를 지구본을 도는 위성처럼 궤도 위에 놓는다.
   궤도는 장식 궤도(.hero-orbit--1)·달과 같은 크기·기울기의 타원(긴반지름 = 지구본 지름의
   59.375%, 짧은/긴 = 0.38, -30° 기울기)이고, 카드 4장은 이 궤도가 환영 문구 링과 만나는
   네 지점(궤도각 ±22.7°, 180±22.7°)에 지구본 중심 기준 점대칭으로 놓인다.
   위치 = 중심 + 긴반지름 × (--kx, --ky), 여기서
     --kx = cos30·cosθ + 0.5·0.38·sinθ,  --ky = -0.5·cosθ + cos30·0.38·sinθ
   sinθ > 0(아래쪽 절반)이 보는 사람 쪽이라 앞 궤도 카드는 크게, 뒤 궤도 카드는 작게 두고,
   뒤 궤도 카드가 지구본 원과 겹치는 부분은 지구 뒤로 넘어간 것처럼 가린다.
   ========================================================================== */
@media (min-width: 1401px) {
  .hero-globe-card-ring {
    --ring-card: 17cqw;
    --orbit-a: 59.375cqw;
  }

  /* PC 대화면 전용 카드 내용 크기 */
  .hero-globe-card-ring .hero-metric-icon {
    width: 3.6cqw;
    height: 3.6cqw;
  }

  .hero-globe-card-ring .hero-metric-number {
    font-size: clamp(1rem, 4.8cqw, 2.1rem);
  }

  .hero-globe-card-ring .hero-metric-label {
    max-width: 13.5cqw;
    font-size: clamp(0.56rem, 1.5cqw, 0.75rem);
  }
}

@keyframes hero-card-orbit-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 위성이 제자리에서 천천히 떠오르내리는 움직임 — 개별 translate 속성이라 hover·등장
   애니메이션의 transform, 원근 배율(scale 속성)과 서로 덮어쓰지 않고 합쳐진다 */
@keyframes hero-satellite-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

@media (min-width: 1401px) and (prefers-reduced-motion: reduce) {
  .hero-card-orbit,
  .hero-globe-card-ring .hero-impact-card {
    animation: none;
  }
}