/* KWONMO — 인포어스(page/earth/) 전용
   지구본은 축약 헤더 아래 남은 화면을 다 쓴다. 우주 배경이라 판 전환(조간·야간)과 상관없이 늘 어둡다 —
   그래서 색은 val.css 의 판 토큰이 아니라 이 화면 안에서만 쓰는 --ie-* 로 둔다.
   화면 접두는 ie-(infoearth) */

.ie-app {
  --ie-space: #0a0d12;              /* 우주 배경 · 칸 경계선 · 글자 그림자(earth.ts SPACE_COLOR 와 같은 값) */
  --ie-panel: rgba(20, 26, 34, 0.85);
  --ie-text: #d8e0e8;
  --ie-dim: #8b97a5;                /* 꺼진 단추 */
  --ie-faint: #6b7785;              /* 출처 */
  --ie-credit-text: rgba(255, 255, 255, 0.55);   /* 휴대폰 폭 출처 — 지구 위에 바탕 없이 뜬다 */
  --ie-accent: #d8f0ff;             /* 켜진 단추 · 저궤도 층과 같은 색 */
  --ie-line: rgba(216, 240, 255, 0.25);
  --ie-line-on: rgba(216, 240, 255, 0.6);
  --ie-error: #b3261e;
  --ie-name: #f4ecd8;               /* 국가 이름 — 국경선(#f2e8cc)과 같은 계열 */
  --ie-name-state: #d9d2bf;
  --ie-name-water: #a9d4f0;
  --ie-name-ocean: #8fc3e6;
  --ie-name-moon: #fbf6ea;
  --ie-name-site: #ffd36b;          /* 아폴로 착륙지 · 저궤도 층의 채운 칸과 같은 색 */
  --ie-name-flight: #7fd4ff;        /* 편명 — 항공기 화살촉 · 밀도 칸과 같은 색(earth.ts FLIGHT_COLOR) */
  --ie-warn: #ffb74d;               /* 언론사를 새로 못 받았을 때 단추의 점 — 빨간 줄(오류)보다 한 단계 아래 */
  --ie-news-bbc: #bb1919;           /* 언론사 색 — 카드 띠 · 테두리 · 선 */
  --ie-news-aljazeera: #c8942e;
  --ie-news-ap: #3d7fd6;            /* AP 는 로고가 빨강이라 BBC 와 헷갈려 파랑으로 */
  --ie-news-scmp: #1fa39a;

  position: fixed; left: 0; right: 0; top: var(--header-total); bottom: 0; overflow: hidden;
  background: var(--ie-space); font-family: system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
}
.ie-app #globe { position: absolute; inset: 0; touch-action: none; }
/* 전체화면(머리줄 단추가 documentElement 를 올린다)에서는 머리줄을 위로 숨겨 지구본이 화면을 다 쓴다.
   위끝에 포인터가 닿으면 earth.ts 가 is-peek 를 붙여 내려온다(10-26 댄). 이 CSS 는 인포어스에서만 실려 다른 화면은 그대로 */
:root:fullscreen .ie-app { top: 0; }
:root:fullscreen .masthead { position: fixed; left: 0; right: 0; transform: translateY(-100%); transition: transform 0.2s; }
:root:fullscreen .masthead.is-peek { transform: none; }
/* 상태 줄과 메뉴(EARTH · NEWS)는 한 줄에 나란히 — 펼친 메뉴 띠가 가로로 길어도 상태 줄을 덮지 않는다(상태 줄이 좁아져 줄을 바꾼다).
   상태 줄은 메뉴를 뺀 남은 폭의 가운데 */
.ie-top { position: absolute; left: 0.8em; right: 0.8em; top: 0.6em; display: flex; align-items: flex-start; gap: 0.8em; pointer-events: none; }
.ie-bar {
  flex: 0 1 auto; min-width: 0; margin: 0 auto; padding: 0.4em 0.9em; border-radius: 0.4em;
  background: var(--ie-panel); color: var(--ie-text); font-size: 0.85rem; pointer-events: none;
}
.ie-bar .ie-note { display: block; font-size: 0.85em; opacity: 0.7; }
.ie-bar.is-error { background: var(--ie-error); color: #fff; }
/* 평소 안내 · 수치는 필요 없다(10-26 댄) — 외부 자료 실패 이유만 띄운다 */
.ie-bar:not(.is-error) { display: none; }
.ie-dock {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0.6em 0.4em;
  display: flex; flex-direction: column; align-items: center; gap: 0.6em; pointer-events: none;
}
.ie-credits { align-self: stretch; }
.ie-credit { text-align: right; color: var(--ie-faint); font-size: 0.7rem; }
.ie-toggles { flex: 0 0 auto; max-width: 60%; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3em; }
.ie-groups { display: flex; gap: 0.3em; }
/* 묶음마다 따로 펼친다 — 둘 다 펼치면 EARTH 띠 아래 NEWS 띠(10-26 댄) */
.ie-strip { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3em; }
.ie-strip[hidden] { display: none !important; }
.ie-group {
  padding: 0.4em 0.9em; border-radius: 0.4em; cursor: pointer; pointer-events: auto; letter-spacing: 0.06em;
  border: var(--hairline) solid var(--ie-line-on); background: var(--ie-panel); color: var(--ie-text); font: inherit; font-size: 0.8rem; font-weight: 600;
}
.ie-group[aria-expanded="true"] { color: var(--ie-space); background: var(--ie-accent); border-color: var(--ie-accent); }
.ie-group-n { margin-left: 0.3em; font-weight: 400; opacity: 0.75; letter-spacing: 0; }
/* CLEAR(10-26 댄): 켜 둔 층 · 뉴스 카드 · 이름은 그대로 두고 화면 틀만 숨긴다. visibility 라 자리는 남아 CLEAR 단추가 제자리에 있다.
   숨긴 동안 CLEAR 는 거의 투명 — 마우스를 올리면 조금 드러난다 */
body.is-clear .ie-bar, body.is-clear .ie-strip, body.is-clear .ie-group:not(.ie-clear),
body.is-clear .ie-dock, body.is-clear .ie-info, body.is-clear .fab { visibility: hidden; }
body.is-clear .ie-clear { opacity: 0.08; transition: opacity 0.2s; }
body.is-clear .ie-clear:hover { opacity: 0.5; }
.ie-app #names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ie-name {
  position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--ie-name); font-size: 0.78rem; font-weight: 600;
  text-shadow: 0 0 0.25em var(--ie-space), 0 0 0.5em var(--ie-space); transform-origin: 0 0;
}
.ie-name.is-state { font-size: 0.62rem; font-weight: 400; color: var(--ie-name-state); }
.ie-name.is-water { color: var(--ie-name-water); font-style: italic; font-weight: 400; font-size: 0.72rem; letter-spacing: 0.04em; }
.ie-name.is-ocean { font-size: 0.95rem; letter-spacing: 0.35em; color: var(--ie-name-ocean); }
.ie-name.is-small { font-size: 0.62rem; }
/* 달 바탕이 밝아 지구 이름보다 그림자를 짙게 */
.ie-name.is-moon { color: var(--ie-name-moon); font-weight: 600; font-size: 0.7rem; text-shadow: 0 0 0.2em var(--ie-space), 0 0 0.35em var(--ie-space), 0 0 0.6em var(--ie-space); }
.ie-name.is-mare { font-size: 0.82rem; font-style: italic; letter-spacing: 0.08em; }
.ie-name.is-crater { font-size: 0.66rem; font-weight: 400; }
.ie-name.is-site { font-size: 0.66rem; font-weight: 600; color: var(--ie-name-site); }
/* 편명은 화살촉 바로 아래 — 자리는 화살촉 한가운데로 잡히므로 글만 내린다 */
.ie-name.is-flight { font-size: 0.62rem; font-weight: 600; color: var(--ie-name-flight); margin-top: 1.1em; }
.ie-name[hidden] { display: none !important; }
/* 나라 정보 카드 — 왼쪽 가운데(위는 상태 줄, 아래는 시계 · 오른쪽은 메뉴라 비어 있는 곳). 휴대폰 폭은 아래 */
.ie-info {
  position: absolute; left: 0.8em; top: 50%; transform: translateY(-50%); width: 19em; max-width: calc(100% - 1.6em);
  padding: 0.7em 0.8em 0.6em; border-radius: 0.5em; pointer-events: auto;
  background: var(--ie-panel); border: var(--hairline) solid var(--ie-line-on); color: var(--ie-text); font-size: 0.8rem; line-height: 1.4;
}
.ie-info[hidden] { display: none !important; }
/* 닫기 — 누르기 쉽게 크게(10-26 댄) */
.ie-info-close {
  position: absolute; right: 0.2em; top: 0.1em; min-width: 1.6em; min-height: 1.6em; padding: 0; border: none; background: transparent; cursor: pointer;
  color: var(--ie-dim); font: inherit; font-size: 1.6rem; line-height: 1;
}
.ie-info-close:hover { color: var(--ie-text); }
.ie-info-head { display: flex; align-items: center; gap: 0.6em; margin: 0 2em 0.6em 0; }
.ie-info-flag { width: 3.2em; height: auto; border: var(--hairline) solid var(--ie-line); flex: none; }
.ie-info-name { font-size: 1.05rem; font-weight: 700; color: var(--ie-name); }
.ie-info-en { font-size: 0.85em; color: var(--ie-dim); }
.ie-info-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.3em 0.7em; margin: 0; }
.ie-info-list dt { color: var(--ie-dim); }
.ie-info-list dd { margin: 0; }
.ie-info-src { margin-top: 0.5em; text-align: right; font-size: 0.85em; color: var(--ie-faint); }
/* 뉴스 카드 — 머리(언론사 색 띠 + 나라) + 제목 줄, 아래 왼쪽에서 나라 자리로 선이 내려간다(earth.ts 가 길이를 넣는다) */
.ie-app #news { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ie-news {
  position: absolute; left: 0; top: 0; max-width: 18em; padding: 0.35em 0.5em; border-radius: 0.3em; pointer-events: auto;
  background: var(--ie-panel); border: var(--hairline) solid var(--ie-news-color); color: var(--ie-text); font-size: 0.72rem; line-height: 1.3;
}
.ie-news[hidden] { display: none !important; }
.ie-news.is-bbc { --ie-news-color: var(--ie-news-bbc); }
.ie-news.is-aljazeera { --ie-news-color: var(--ie-news-aljazeera); }
.ie-news.is-ap { --ie-news-color: var(--ie-news-ap); }
.ie-news.is-scmp { --ie-news-color: var(--ie-news-scmp); }
.ie-news-head { margin-bottom: 0.2em; color: var(--ie-dim); font-size: 0.9em; white-space: nowrap; }
.ie-news-src { display: inline-block; margin-right: 0.4em; padding: 0 0.35em; background: var(--ie-news-color); color: #fff; font-weight: 700; letter-spacing: 0.05em; }
.ie-news-title { display: block; color: var(--ie-text); text-decoration: none; }
.ie-news-title:hover { color: var(--ie-accent); text-decoration: underline; }
/* 번역(크롬 내장 번역기) — 영어 제목 바로 밑에, 선 없이 색만 달리(10-26 댄). 번역이 오기 전 · 번역기가 없는 브라우저에서는 줄째 없다 */
.ie-news-ko { display: block; margin-top: 0.2em; color: var(--ie-name); }
.ie-news-ko:empty { display: none; }
/* 한 카드에 기사가 여럿이면(같은 나라) 기사 사이에 얇은 선 — 영어 · 한국어 한 쌍이 한 기사로 읽히게 */
.ie-news-title + .ie-news-title { margin-top: 0.4em; padding-top: 0.4em; border-top: var(--hairline) solid var(--ie-line); }
.ie-news-stem { position: absolute; left: 0.8em; top: 100%; width: var(--stroke-2); background: var(--ie-news-color); }
.ie-news-stem::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 0.4em; height: 0.4em; border-radius: 50%;
  background: var(--ie-news-color); transform: translate(-50%, 50%);
}
/* 위로 쌓을 자리가 없어 나라 자리 아래에 단 카드 — 선이 카드 위로 올라가 점이 위끝에 */
.ie-news.is-below .ie-news-stem { top: auto; bottom: 100%; }
.ie-news.is-below .ie-news-stem::after { bottom: auto; top: 0; transform: translate(-50%, -50%); }
.ie-toggle {
  padding: 0.4em 0.8em; border-radius: 0.4em; cursor: pointer; pointer-events: auto;
  border: var(--hairline) solid var(--ie-line); background: var(--ie-panel); color: var(--ie-dim); font: inherit; font-size: 0.8rem;
}
.ie-toggle[aria-pressed="true"] { color: var(--ie-accent); border-color: var(--ie-line-on); }
/* 날씨는 시계가 실제 지금일 때만 — 그 밖에는 눌리지 않는다 */
.ie-toggle:disabled { opacity: 0.4; cursor: default; }
/* 언론사를 새로 못 받았거나 내렸을 때(10-26 댄: 빨간 줄 대신) — 단추 오른쪽 위 점, 까닭은 title 로 */
.ie-toggle.has-warn, .ie-group.has-warn { position: relative; }
.ie-toggle.has-warn::after, .ie-group.has-warn::after {
  content: ''; position: absolute; top: 0.2em; right: 0.2em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--ie-warn);
}
/* 편명 찾기(10-26 댄): 테두리만 있고 바탕은 비친다 */
.ie-search { display: inline-flex; align-items: center; gap: 0.3em; pointer-events: auto; }
.ie-search[hidden] { display: none !important; }
.ie-search-input {
  width: 6.5em; padding: 0.4em 0.6em; border-radius: 0.4em; border: var(--hairline) solid var(--ie-line-on);
  background: transparent; color: var(--ie-text); font: inherit; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.ie-search-input::placeholder { color: var(--ie-faint); }
.ie-search-input:focus { outline: none; border-color: var(--ie-accent); }
.ie-search-btn {
  display: inline-flex; align-items: center; padding: 0.4em 0.55em; border-radius: 0.4em; cursor: pointer;
  border: var(--hairline) solid var(--ie-line); background: var(--ie-panel); color: var(--ie-dim); font-size: 0.8rem;
}
.ie-search-btn:hover { color: var(--ie-accent); border-color: var(--ie-line-on); }
.ie-search-btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ie-search-hint { font-size: 0.72rem; color: var(--ie-dim); text-shadow: 0 0 0.25em var(--ie-space); }
.ie-search-hint:empty { display: none; }
.ie-console { --bgm-panel:var(--ie-panel); --bgm-text:var(--ie-text); --bgm-credit-text:var(--ie-credit-text); --bgm-space:var(--ie-space); --bgm-accent:var(--ie-accent); --bgm-dim:var(--ie-dim); --bgm-line:var(--ie-line); display: flex; flex-direction: column; align-items: stretch; gap: 0.3em; max-width: 100%; }
.ie-clock {
  padding: 0.5em 0.8em; border-radius: 0.5em; pointer-events: auto;
  background: var(--ie-panel); color: var(--ie-text); font-size: 0.85rem; text-align: center; max-width: 100%;
}
.ie-clock .ie-clock-text { margin-bottom: 0.4em; white-space: nowrap; }
.ie-clock .ie-clock-row { display: flex; flex-wrap: wrap; gap: 0.3em; justify-content: center; }
.ie-speed, .ie-now {
  padding: 0.25em 0.6em; border-radius: 0.3em; cursor: pointer; font: inherit; font-size: 0.8rem;
  border: var(--hairline) solid var(--ie-line); background: transparent; color: var(--ie-dim);
}
.ie-speed[aria-pressed="true"] { color: var(--ie-space); background: var(--ie-accent); border-color: var(--ie-accent); }
.ie-now { color: var(--ie-text); }
/* 휴대폰 폭에서만 쓰는 접기 단추 — 지금 속도 하나 · 출처 */
.ie-speed-pick, .ie-credit-btn { display: none; }

/* 햄버거 단추(FAB)가 보이는 폭 — 단추가 화면 아래 구석에 떠 있어 묶음을 그 위로 올린다(손모드로 좌우가 바뀌어 옆으로 비킬 수 없다) */
@media (max-width: 80em) {
  .ie-dock { bottom: calc(var(--fab-gap) + var(--fab-size) + var(--sp-sm) + var(--safe-b)); }
  .ie-credit { text-align: center; }
}

/* 휴대폰 폭 — 화면이 좁아 지구를 가리지 않게 접는다(10-26 댄): 위는 토글 한 줄,
   시계는 아래 한가운데(햄버거 단추와 겹쳐도 된다 — 댄), 출처는 오른쪽 아래 반투명 글자 하나 */
@media (max-width: 48em) {
  .ie-top { position: absolute; left: 0.6em; right: 0.6em; top: 0.6em; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em; pointer-events: none; }
  .ie-bar { flex: none; margin: 0; width: 100%; font-size: 0.75rem; }
  .ie-toggles { max-width: none; margin-left: 0; align-items: flex-start; }
  .ie-strip { justify-content: flex-start; }
  .ie-toggle, .ie-group { font-size: 0.72rem; padding: 0.35em 0.6em; }
  /* 묶음을 화면 전체로 펴서 시계와 출처를 각자 자리에 놓는다 */
  .ie-dock { top: 0; bottom: 0; padding: 0; }
  .ie-console {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--fab-gap) + var(--safe-b));
    /* 겹쳐도 되지만 펼친 속도 단추가 햄버거 단추 밑에 깔려 눌리지 않았다 — 양쪽에서 단추 자리만큼 비워 줄을 바꾼다 */
    width: max-content; max-width: calc(100% - (var(--fab-gap) + var(--fab-size)) * 2);
  }
  .ie-info { left: 0.6em; right: 0.6em; width: auto; max-width: none; top: auto; transform: none; bottom: calc(var(--fab-gap) + var(--fab-size) * 2 + var(--sp-sm) * 2 + var(--safe-b)); }
  .ie-clock { min-height: var(--fab-size); display: flex; flex-direction: column; justify-content: center; font-size: 0.78rem; }
  .ie-clock .ie-clock-text { white-space: normal; }
  .ie-clock-row:not(.is-open) .ie-speed { display: none; }
  .ie-speed-pick {
    display: inline-block; padding: 0.25em 0.6em; border-radius: 0.3em; cursor: pointer; font: inherit; font-size: 0.8rem;
    border: var(--hairline) solid var(--ie-accent); background: var(--ie-accent); color: var(--ie-space);
  }
  .ie-speed-pick::after { content: ' ▾'; }
  .ie-speed-pick[aria-expanded="true"]::after { content: ' ▴'; }
  /* 손모드와 상관없이 늘 오른쪽 — 햄버거 단추를 따라다니지 않는다(댄) */
  .ie-credits {
    position: absolute; left: 0.6em; right: var(--fab-gap); bottom: calc(var(--fab-gap) + var(--fab-size) + var(--sp-sm) + var(--safe-b));
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.3em;
  }
  .ie-credit-btn {
    display: block; pointer-events: auto; cursor: pointer; padding: 0.3em 0; border: none; background: transparent;
    color: var(--ie-credit-text); font: inherit; font-size: 0.72rem; text-shadow: 0 0 0.3em var(--ie-space);
  }
  /* 바탕 없이 글자만 — 지구 위에서도 읽히게 그림자만 준다 */
  .ie-credit { display: none; text-align: right; font-size: 0.65rem; color: var(--ie-credit-text); text-shadow: 0 0 0.3em var(--ie-space), 0 0 0.6em var(--ie-space); }
  .ie-credit.is-open { display: block; }
}