/* ==========================================================================
   Travel globe — /hobby/travel/ 전용

   블록 접두사는 .tglobe 하나. 구조는 tuning-sim.css 와 같은 골격을 따른다.

     .tglobe            래퍼
       .tglobe__head    제목 + 안내
       .tglobe__stage   무대 (globe.gl 이 이 안에 캔버스를 만든다)
         .tglobe__globe   그 컨테이너
         .tglobe__label   대표 도시 이름 (three-globe 의 htmlElements)
       .tglobe__panel   버튼
       .tglobe__stats   카운터

   ── 색은 전부 여기서 정한다 ──────────────────────────────────────────────
   지구본은 WebGL 이라 CSS 로 칠할 수 없고, 대신 travel-globe.js 가 아래
   --tglobe-* 를 getComputedStyle 로 읽어 간다. 라이트/다크 두 벌을 JS 와 CSS
   양쪽에 적지 않기 위한 장치다 — 색을 고칠 곳은 언제나 이 파일이다.
   변수 이름을 바꾸면 JS 의 css() 호출부도 같이 바꿔야 한다.

   지구 표면 자체는 텍스처 사진이라 여기서 손댈 수 없다. 테마에 따라 낮
   (earth-day.jpg)과 야경(earth-night.jpg)을 바꿔 끼우는 것이 JS 의 paint() 다.
   ========================================================================== */

.tglobe {
  /* 지구본이 읽어 가는 색.

     ── 왜 값을 직접 안 적나 ──────────────────────────────────────────────
     이 테마는 라이트와 다크에서 정체성 색 자체가 바뀐다 — primary 가 파랑
     (#2563eb) 에서 청록(#2dd4bf) 으로 간다(base/_tokens.scss). 그래서 지구본
     색을 여기 두 벌 적어 두면 테마 팔레트를 손볼 때 이 파일이 조용히 뒤처진다.
     토큰을 가리키면 그 규칙을 저절로 따라간다.

     ── 어느 토큰인가 ──────────────────────────────────────────────────
     사이트의 다른 부분과 같은 말을 쓴다.

       핀(다녀온 도시) = primary. 스크롤바·링크·눌린 버튼이 쓰는 그 색이라
         지구본이 페이지에서 따로 놀지 않는다. 라이트 파랑 / 다크 청록.
         다크에서는 야경(Black Marble)의 도시 불빛이 노란 흰빛이라 노란 핀이
         그 속에 묻혔는데, 청록은 불빛과 가장 먼 색이라 그 문제도 같이 푼다.
       방문국 덮개 = visited-link. "가 본 곳" 이라는 뜻이 링크의 visited 와
         같다. 라이트 pink-600 / 다크 pink-400 으로, 두 모드 모두
         핀(파랑·청록)과 색상환에서 멀어 점과 면이 헷갈리지 않는다.

     한때 덮개는 accent-important(보라)였다 — 열 가지를 렌더해 보고 남은
     답이었고, 그때 밀려난 이유는 지금도 맞다: 파랑은 바다에 잠기고, 붉은
     계열은 사진과 싸운다. 자홍도 붉은 쪽이라 농도를 0.34 → 0.24 로 낮춰
     지형이 비치게 했다. 핀이 노랑이던 시절엔 보라 옆에 노랑이 잘 섰는데,
     핀이 파랑이 되니 보라와 파랑이 붙어 보여 덮개를 반대편으로 옮겼다.

     농도만 여기서 정한다. 테두리는 THREE.Line 이라 알파가 먹지 않아
     travel-globe.js 가 어느 배율 아래에서는 선을 아예 끊는다. */
  --tglobe-cap: var(--color-visited-link);
  --tglobe-cap-alpha: 0.24;
  --tglobe-edge: var(--color-visited-link);
  --tglobe-edge-alpha: 1;
  --tglobe-visited-edge: var(--color-visited-link);
  --tglobe-pin: var(--color-primary);
  --tglobe-atmosphere: #9ec5ff;

  /* surfaces — 테마 변수를 그대로 따라간다 */
  --tglobe-fg: var(--color-text-primary, #111827);
  --tglobe-muted: var(--color-text-muted, #6b7280);
  --tglobe-surface: var(--color-bg-secondary, #f3f4f6);
  --tglobe-surface-2: var(--body-background, #ffffff);
  --tglobe-border: var(--color-border, #e5e7eb);

  margin: var(--hj-block-space, 2rem) 0;
  padding: 1rem 1rem 1.15rem;
  border: 1px solid var(--tglobe-border);
  border-radius: var(--border-radius-xl, 0.75rem);
  background: var(--tglobe-surface);
  color: var(--tglobe-fg);
}

html.dark .tglobe {
  /* 색은 토큰이 알아서 바꾼다(#db2777 → #f472b6). 야경 텍스처가 어두워
     같은 알파도 더 세게 먹으므로 농도만 낮춘다. */
  --tglobe-cap-alpha: 0.2;
  --tglobe-atmosphere: #3b82f6;
}

/* ------------------------------------------------------------------- head */

.tglobe__head { margin-bottom: 0.75rem; }

.tglobe__head h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.tglobe__head p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tglobe-muted);
}

/* ------------------------------------------------------------------ stage */

.tglobe__stage {
  position: relative;
  /* 높이를 JS 가 정하지 않는다. globe.gl 의 width/height 는 여기서 정해진 CSS
     크기를 ResizeObserver 로 읽어 넘긴 값이다. */
  aspect-ratio: 4 / 3;
  max-height: 68vh;
  border-radius: var(--border-radius-lg, 0.5rem);
  overflow: hidden;
  /* 텍스처가 도착하기 전의 빈 상자가 흰 구멍으로 보이지 않게. color-mix 를
     모르는 브라우저는 아래 한 줄에서 멈춘다 — 그래도 구멍은 안 뚫린다. */
  background: var(--tglobe-surface-2);
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--tglobe-atmosphere) 22%, transparent),
    transparent 68%), var(--tglobe-surface-2);
}

@supports not (aspect-ratio: 4 / 3) {
  .tglobe__stage { height: 24rem; }
}

/* touch-action 은 OrbitControls 가 정한다(none). 손가락 하나로 지구를 굴리는
   동안 페이지가 같이 흐르지 않게 하려는 것이고, 그 대신 좁은 화면에서는 무대를
   1:1 로 줄여 위아래에 스크롤할 자리를 남긴다(파일 아래 미디어 쿼리). */
.tglobe__globe {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.tglobe__globe:active { cursor: grabbing; }

/* 지구 텍스처가 도착하기 전(ready 가 아닐 때)에는 캔버스를 숨긴다. 그 전의 구는
   흰 공이라 첫 로드마다 한 번 번쩍였다(travel-globe.js 의 onGlobeReady). 배경
   그라데이션과 "불러오는 중" 은 그대로 보이고, 도착하면 짧게 떠오른다. */
.tglobe__globe { opacity: 1; transition: opacity 0.35s ease-out; }
.tglobe:not([data-tglobe-state="ready"]) .tglobe__globe { opacity: 0; }

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

.tglobe__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.85rem;
  color: var(--tglobe-muted);
}

/* JS 가 없으면 무대를 통째로 접는다. 안내는 아래 .tglobe__note 가 한다.
   hj-js 는 <head> 의 테마 초기화 스크립트가 붙인다(docs/js.md). */
html:not(.hj-js) .tglobe__stage { display: none; }

.tglobe[data-tglobe-state="failed"] .tglobe__stage { aspect-ratio: auto; height: 6rem; }

/* 이름표. travel-globe.js 가 스물몇 개를 만들어 두고 돌려 쓴다 — 좌표는
   transform 으로 직접 넣는다. */
.tglobe__labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 가까운 배율에서 3D 점을 대신하는 표시. three-globe 의 점은 높이에 하한이
   있어 도시까지 확대하면 줄로 늘어진다(travel-globe.js 의 applyZoom). */
.tglobe__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--tglobe-pin);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  pointer-events: none;
  will-change: transform;
}

html.dark .tglobe__dot { box-shadow: 0 0 0 1.5px rgba(10, 15, 22, 0.75); }

.tglobe__label {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--tglobe-surface-2);
  background: color-mix(in srgb, var(--tglobe-surface-2) 82%, transparent);
  color: var(--tglobe-fg);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}



/* globe.gl 이 만드는 호버 툴팁. 클래스 이름은 라이브러리가 정한다. */
.tglobe .scene-tooltip {
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid var(--tglobe-border);
  background: var(--tglobe-surface-2);
  color: var(--tglobe-fg);
  font-size: 0.78rem;
  text-shadow: none;
}

.tglobe .scene-tooltip span { color: var(--tglobe-muted); }

/* ------------------------------------------------------------------ panel */

.tglobe__panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  margin-top: 0.75rem;
}

.tglobe__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tglobe__buttons--end { margin-left: auto; }

.tglobe__btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--tglobe-border);
  border-radius: 999px;
  background: var(--tglobe-surface-2);
  color: var(--tglobe-fg);
  font-size: 0.82rem;
  line-height: 1.4;
  cursor: pointer;
}

.tglobe__btn:hover { border-color: var(--tglobe-pin); }

.tglobe__btn:focus-visible {
  outline: 2px solid var(--tglobe-pin);
  outline-offset: 2px;
}

.tglobe__btn--icon {
  min-width: 2.1rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.95rem;
}

.tglobe__btn[aria-pressed="true"] {
  background: var(--tglobe-pin);
  border-color: var(--tglobe-pin);
  color: #fff;
}

html.dark .tglobe__btn[aria-pressed="true"] { color: #0b1219; }

/* ------------------------------------------------------------------ stats */

.tglobe__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
}

.tglobe__stat {
  flex: 1 1 6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--border-radius-lg, 0.5rem);
  background: var(--tglobe-surface-2);
  border: 1px solid var(--tglobe-border);
}

.tglobe__stat dt {
  margin: 0;
  font-size: 0.72rem;
  color: var(--tglobe-muted);
}

.tglobe__stat dd {
  margin: 0.1rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tglobe__note {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--tglobe-muted);
}

html.hj-js .tglobe__note { display: none; }

/* --------------------------------------------------------- 나라 목록(칩) */

.countries-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.countries-list li {
  margin: 0;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--body-background, #fff);
  font-size: 0.85rem;
  line-height: 1.5;
}

html.hj-js .countries-list li[data-tglobe-iso] { cursor: pointer; }

/* 칩 테두리도 primary — 라이트 파랑, 다크 청록을 토큰이 알아서 준다. */
html.hj-js .countries-list li[data-tglobe-iso]:hover,
html.hj-js .countries-list li[data-tglobe-iso]:focus-visible {
  border-color: var(--color-primary, #2563eb);
  outline: none;
}

@media (max-width: 560px) {
  .tglobe { padding: 0.75rem 0.75rem 0.9rem; }
  /* 지구본 위에서는 페이지가 스크롤되지 않는다. 화면을 다 덮으면 지나갈
     길이 없어지므로 1:1 로 줄이고 높이도 못 박는다 — 세로로 긴 화면에서도
     위아래에 손가락 둘 자리가 남는다. */
  .tglobe__stage { aspect-ratio: 1 / 1; max-height: 56vh; }
  .tglobe__btn { padding: 0.28rem 0.6rem; font-size: 0.78rem; }
}