/* 웹폰트 Pretendard (동적 서브셋 — 실제로 쓰인 글자만 내려받습니다).
   단, 폰트 스택에서 -apple-system을 앞에 두었기 때문에
   iOS·macOS에서는 OS 기본 폰트(SF Pro)가 우선 적용되고 이 파일은 사용되지 않습니다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/*
  ================================================================
  🌍 지구 동물 탐험대 — style.css
  ================================================================
  이 파일을 수정해서 앱의 색상과 모양을 바꿀 수 있습니다.

  ▶ 로컬 서버 없이는 이 파일이 적용되지 않습니다.
     (python -m http.server 8000 등으로 실행 필요)
  ================================================================
*/

/* ============================================================
   🎨 지구본 색상 변수 — 4가지 카테고리로 단순화
   ============================================================
   ① 바다       — 모든 해양
   ② 극지방     — 북극·남극·빙하·설원
   ③ 녹색 땅    — 숲·초원·온대 (생명력 있는 땅)
   ④ 사막 땅    — 사막·사바나·산악 (건조한 땅)

   아래 색상 값을 바꾸면 지구본 색이 변합니다.
   변경 후 페이지를 새로고침하세요.
   ============================================================ */
:root {
  /* === ① 바다 === */
  --globe-ocean:          #0795BF;

  /* === ② 극지방 === */
  --globe-ice:            #DDF0F5;

  /* === ③ 녹색 땅 === */
  --globe-land-green:     #3A8C2F;

  /* === ④ 사막 땅 === */
  --globe-land-desert:    #C8A84B;

  /* === 대기권 후광 === */
  --globe-atmosphere:     rgba(30,160,220,0.12);

  /* === 마커 설정 === */
  --marker-size:          0.05;     /* 마커 주변 터치 영역 크기 (0.03~0.07) */
}


/* ============================================================
   🌈 색상 테마 프리셋 예시 — 원하는 테마의 주석을 해제하세요
   ============================================================ */

/* --- 야간 지구 테마 (어둡고 파랗게) ---
:root {
  --globe-ocean:       #03496E;
  --globe-ice:         #B0D8E8;
  --globe-land-green:  #1E5C18;
  --globe-land-desert: #8B7340;
  --globe-atmosphere:  rgba(10,80,160,0.15);
}
*/

/* --- 빈티지 지도 테마 (황토·크림) ---
:root {
  --globe-ocean:       #6CA8C8;
  --globe-ice:         #EEF4F8;
  --globe-land-green:  #6B9E4A;
  --globe-land-desert: #D4B870;
  --globe-atmosphere:  rgba(100,160,200,0.10);
}
*/

/* --- 네온 테마 (형광·미래) ---
:root {
  --globe-ocean:       #00A8D8;
  --globe-ice:         #CCFFFF;
  --globe-land-green:  #00CC44;
  --globe-land-desert: #D8A020;
  --globe-atmosphere:  rgba(0,200,255,0.15);
}
*/


/* ============================================================
   기본 레이아웃
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden}
/* 폰트 스택 — Apple 기기는 OS 기본 폰트(SF Pro)를 먼저 쓰고,
   그 외 환경에서만 웹폰트 Pretendard를 사용합니다. */
body{
  font-family:-apple-system, BlinkMacSystemFont, 'Pretendard Variable', Pretendard,
              system-ui, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  background:#000824;color:#fff
}
button,input,select,textarea{font-family:inherit}
#root{
  width:100vw;height:100vh;height:100dvh;
  position:relative;overflow:hidden;
  background:linear-gradient(to bottom, #000824 0%, #051d6b 100%)
}

/* 헤더: 왼쪽 제목·설명, 오른쪽 ABOUT·언어 버튼.
   헤더 자체는 터치를 통과시켜 지구본 조작을 막지 않고, 버튼만 터치를 받습니다. */
.ae-header{
  position:absolute;top:0;left:0;right:0;z-index:10;pointer-events:none;
  padding:calc(28px + env(safe-area-inset-top, 0px)) 24px 0
}
/* 설명 문구가 헤드라인 역할, 브랜드명은 그 아래 작게.
   문구의 줄바꿈 위치는 index.html 의 tagline 값에 있는 \n 을 따릅니다. */
.ae-tagline{
  margin:0;padding-right:130px;           /* 오른쪽 버튼 자리 */
  font-size:22px;font-weight:700;line-height:1.34;letter-spacing:-.2px;color:#fff;
  white-space:pre-line
}
.ae-brandline{
  margin:20px 0 0;
  font-size:13px;font-weight:600;letter-spacing:.2px;color:rgba(255,255,255,.92)
}

.ae-header-actions{
  position:absolute;right:14px;
  top:calc(28px + env(safe-area-inset-top, 0px));
  display:flex;align-items:center;gap:6px;
  pointer-events:auto
}
/* 눈에 띄지 않게 흐리게 두고, 누르는 동안(또는 메뉴가 열려 있을 때)만 또렷해집니다 */
.ae-header-btn{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  height:34px;padding:0 9px;border-radius:17px;
  display:inline-flex;align-items:center;gap:3px;
  color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.3px;
  opacity:.5;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .15s, opacity .15s
}
.ae-header-btn:active,
.ae-header-btn[aria-expanded="true"]{background:rgba(255,255,255,.12);opacity:1}
.ae-header-btn:focus{outline:none}
.ae-header-btn:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.ae-header-btn svg{width:13px;height:13px;display:block}

/* 언어 메뉴: 거의 투명하지만 뒤를 흐려서 지구본 위에서도 글자가 읽히게 */
.ae-lang{position:relative}
.ae-lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:112px;padding:4px;border-radius:12px;
  background:rgba(8,18,52,.28);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:ae-fade-in .15s ease
}
.ae-lang-menu[hidden]{display:none}
.ae-lang-option{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  width:100%;height:38px;padding:0 12px;border-radius:8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:rgba(255,255,255,.62);font-size:14px;font-weight:500;letter-spacing:.2px;
  cursor:pointer;-webkit-tap-highlight-color:transparent
}
.ae-lang-option[aria-checked="true"]{color:#fff}
.ae-lang-option:active{background:rgba(255,255,255,.12)}
.ae-lang-option:focus{outline:none}
.ae-lang-option:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.ae-lang-option svg{width:15px;height:15px;display:block}

/* 지구본 영역 */
.ae-globe-area{width:100%;height:100%;cursor:grab;touch-action:none}
.ae-globe-area:active{cursor:grabbing}
.ae-globe-area canvas{display:block}

/* 레이블 컨테이너 */
.ae-labels{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}

/* ─── 마커 레이블 ─── */
/* 지역 마커: 그림자 있는 흰 원 → 회색 원 → 동물 아이콘(원형 마스킹) + 아래 지역명.
   아이콘 확대 배율·머리 위 여백은 index.html의 MARKER_ZOOM / MARKER_HEAD_ROOM. */
.ae-labels{--marker-badge:56px;--marker-ring:4px}
.ae-marker{
  position:absolute;top:0;left:0;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:opacity .2s;
  will-change:transform,opacity
}
.ae-marker-badge{
  width:var(--marker-badge);height:var(--marker-badge);
  padding:var(--marker-ring);border-radius:50%;
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.1)
}
.ae-marker-face{
  position:relative;width:100%;height:100%;
  border-radius:50%;overflow:hidden;
  background:#d9dde3
}
.ae-marker-img{
  position:absolute;left:-20%;top:-20%;   /* top은 아이콘마다 스크립트가 맞춤 */
  width:140%;height:140%;max-width:none;
  opacity:0;transition:opacity .3s ease
}
.ae-marker-img.is-active{opacity:1}
.ae-marker-emoji{position:absolute;inset:18%;width:64%;height:64%}

.ae-marker-label{
  background:rgba(23,55,80,.7);
  color:#fff;
  padding:5px 14px;
  border-radius:4px;
  font-size:12px;font-weight:500;
  white-space:nowrap;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  letter-spacing:.2px;
  display:flex;align-items:center;gap:5px
}

/* ─── 첫 진입 스와이프 안내 ───
   손가락이 좌 → 우 → 좌 → 우로 움직이며, 마지막에 오른쪽으로 가면서 사라집니다.
   지구본 조작을 시작하면 즉시 제거됩니다. */
.ae-swipe-hint{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:9;
  pointer-events:none;              /* 지구본 조작을 가리지 않도록 */
  display:flex;align-items:center;justify-content:center
}
/* 이동과 사라짐을 하나의 애니메이션으로 묶어 타이밍이 어긋나지 않게 합니다.
   좌 → 우 → 좌로 돌아오면서 마지막 구간에 서서히 사라집니다. */
.ae-swipe-hand{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  animation:ae-swipe-move 2.3s ease-in-out 1 forwards   /* 보이는 시간 약 +30% */
}
.ae-swipe-hand img{
  width:100%;height:100%;
  object-fit:contain;display:block;
  -webkit-user-drag:none;user-select:none
}

@keyframes ae-swipe-move{
   0%  {transform:translateX(-40px); opacity:0}   /* 좌 (나타남) */
   8%  {opacity:1}
  33%  {transform:translateX( 40px)}              /* 우 */
  66%  {transform:translateX(-40px); opacity:1}   /* 다시 좌 */
 100%  {transform:translateX( 40px); opacity:0}   /* 우로 가면서 사라짐 */
}

/* 하단 지역 네비게이션 — 한 줄로 나열하고 넘치면 가로 스크롤 */
.ae-region-nav{
  position:absolute;left:0;right:0;
  /* 위아래 padding으로 터치 영역을 넉넉히 확보합니다.
     bottom을 그만큼 내려서 버튼이 보이는 위치는 이전과 동일하게 유지합니다.
     (영역이 좁으면 손가락이 살짝 벗어날 때 아래 지구본이 터치를 받습니다) */
  bottom:env(safe-area-inset-bottom, 0px);
  display:flex;gap:5px;
  flex-wrap:nowrap;justify-content:center;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;                    /* 이 영역의 제스처는 가로 스크롤로만 처리 */
  scrollbar-width:none;                  /* 스크롤바 숨김 (Firefox) */
  z-index:10;padding:18px 16px
}
.ae-region-nav::-webkit-scrollbar{display:none}   /* 스크롤바 숨김 (WebKit) */

/* 넘칠 때만: 왼쪽 정렬로 바꾸고 오른쪽 끝을 흐리게 처리해 더 있다는 힌트를 줌 */
.ae-region-nav.is-scrollable{
  justify-content:flex-start;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
          mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent 100%)
}
/* 끝까지 스크롤하면 더 볼 게 없으므로 페이드 해제 */
.ae-region-nav.is-scrollable.is-at-end{
  -webkit-mask-image:none;
          mask-image:none
}
.ae-region-btn{
  flex-shrink:0;                 /* 가로 스크롤 시 버튼이 찌그러지지 않도록 */
  white-space:nowrap;
  background:rgba(255,255,255,.06);
  border:1.5px solid var(--region-color,#888);
  border-radius:18px;
  padding:8px 12px;              /* 터치하기 쉽도록 높이를 약 10% 키움 */
  color:#fff;font-size:13px;font-weight:500;
  cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .18s ease;
  font-family:inherit;
  display:flex;align-items:center;gap:5px
}
.ae-region-btn:hover,.ae-region-btn:focus{transform:scale(1.06);outline:none}

/* 네비게이션 버튼 아이콘 */
.ae-btn-icon{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}
.ae-btn-icon img{
  width:22px;height:22px;
  object-fit:contain;
  display:block
}
.ae-btn-icon .ae-btn-emoji{
  font-size:16px;line-height:1
}

/* ============================================================
   오버레이 & 팝업
   ------------------------------------------------------------
   레이어 순서: 지역 팝업(20) < 동물 상세(30) < 슬라이드 뷰어(40)
   ============================================================ */
.ae-overlay,
.ae-animal-overlay{
  position:fixed;top:0;left:0;right:0;
  height:100vh;height:100dvh;            /* 보이는 영역 기준 — 크롬 모바일 상·하단 잘림 방지 */
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);
  padding:14px;
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  animation:ae-fade-in .2s ease
}
.ae-overlay{z-index:20}
.ae-animal-overlay{z-index:30}
.ae-overlay[hidden],
.ae-animal-overlay[hidden]{display:none}

/* ABOUT 팝업 — 화면 중앙 카드. 가장 위 레이어(50).
   내용과 디자인은 나중에 채울 예정이라 틀만 잡아 둡니다. 본문이 길면 카드 안에서 스크롤. */
.ae-about-overlay{
  position:fixed;top:0;left:0;right:0;
  height:100vh;height:100dvh;
  z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);
  padding:24px 18px;
  padding-top:calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  animation:ae-fade-in .2s ease
}
.ae-about-overlay[hidden]{display:none}
.ae-about{
  width:100%;max-width:420px;
  max-height:92vh;max-height:92dvh;     /* 내용이 한 화면에 최대한 들어오도록 */
  display:flex;flex-direction:column;
  background:#fff;color:#1a1f36;
  border-radius:22px;overflow:hidden;
  box-shadow:0 10px 50px rgba(0,0,0,.45);
  animation:ae-pop-in .25s ease
}
.ae-about-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 12px 4px 24px
}
.ae-about-title{margin:6px 0 0;font-size:14px;font-weight:700;letter-spacing:.2px}
.ae-about-close{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#1a1f36;cursor:pointer;-webkit-tap-highlight-color:transparent
}
.ae-about-close:active{background:#eef0f4}
.ae-about-close:focus{outline:none}
.ae-about-close:focus-visible{box-shadow:0 0 0 2px #9aa6c4}
.ae-about-close svg{width:22px;height:22px;display:block}
.ae-about .ae-about-body{               /* .ae-scroll 의 min-height:0 보다 우선 */
  flex:1;min-height:160px;overflow-y:auto;
  padding:10px 24px 26px;
  font-size:14.5px;line-height:1.5;color:#5a6172
}
.ae-about-body p{margin:0 0 4px}
.ae-about-h{margin:0 0 8px;font-size:19px;font-weight:700;color:#1a1f36;letter-spacing:-.2px}
.ae-about-lead{margin:0 0 14px;font-size:15px;font-weight:700;color:#1a1f36}
.ae-about-img{
  display:block;width:90%;max-width:340px;height:auto;
  margin:20px auto 30px
}
.ae-about-note-title{margin:0 0 6px;font-size:15px;font-weight:700;color:#1a1f36}
.ae-about-note{font-size:13.5px;line-height:1.6;color:#8b92a6}
.ae-about-foot{
  margin-top:14px;font-size:13.5px;line-height:1.7;color:#a2a8bb
}
.ae-about-foot a{color:inherit;text-decoration:none}
.ae-about-foot a:hover{text-decoration:underline}

/* 동물 상세가 지역 팝업 위에 겹치면 어두운 배경이 두 겹으로 쌓여 지나치게 어두워집니다.
   이때는 뒤쪽 지역 오버레이의 배경을 걷어내고 위의 상세 오버레이 한 겹만 남겨
   팝업이 하나만 떠 있을 때와 같은 투명도를 유지합니다. */
.ae-overlay.is-covered{background:transparent}
@keyframes ae-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ae-pop-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

.ae-popup{
  background:#ffffff;
  border:none;
  border-radius:26px;
  width:100%;max-width:440px;max-height:90vh;max-height:90dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
  position:relative;
  box-shadow:0 10px 50px rgba(0,0,0,.45);
  animation:ae-pop-in .25s ease
}

/* 닫기 버튼 — 기본형: 어두운 반투명 (동물 상세 팝업에서 사용) */
.ae-popup-close{
  position:absolute;top:12px;right:12px;
  background:rgba(0,0,0,.32);
  border:none;border-radius:50%;
  width:32px;height:32px;
  color:#fff;font-size:15px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:6;font-family:inherit;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .15s ease
}
.ae-popup-close:hover,.ae-popup-close:focus{background:rgba(0,0,0,.55);outline:none}

/* 지역 팝업의 닫기 버튼 — 사진 위에 놓이므로 조금 크게 (색은 기본형과 동일) */
.ae-region-popup .ae-popup-close{
  top:14px;right:14px;
  width:36px;height:36px
}
.ae-region-popup .ae-popup-close .ae-icon-close{width:17px;height:17px}

/* 동물 상세가 위에 떠 있을 때는 뒤쪽 지역 팝업의 닫기 버튼을 숨김 */
.ae-popup.is-covered .ae-popup-close{opacity:0;pointer-events:none}

/* 스크롤 영역 공통 */
.ae-scroll{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;           /* 뒤 레이어로 스크롤이 전파되지 않도록 */
  flex:1;min-height:0
}
.ae-scroll::-webkit-scrollbar{width:8px}
.ae-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}
.ae-scroll::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   지역 팝업: 상단 배경이미지 + 바텀시트
   ============================================================ */
/* 지역 팝업은 바텀시트 위치 계산의 기준이 되도록 높이를 고정하고,
   바탕은 검정 — 배경이미지가 밀려 올라가거나 시트를 당겼을 때
   드러나는 빈 영역이 자연스럽게 검은색으로 이어지도록 */
.ae-region-popup{
  height:90vh;height:90dvh;
  background:#ffffff
}

/* ─── 상단 배경이미지 (시트 뒤에 깔림) ─── */
.ae-region-bg{
  position:absolute;top:0;left:0;right:0;
  height:56%;                            /* 접힘 위치(40%)보다 크게 잡아 시트 아래로 이어지게 */
  overflow:hidden;
  background:var(--region-soft, #f3f4f6);
  z-index:0
}
.ae-region-bg-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  transform-origin:center 35%;
  opacity:0;                                   /* 로드 완료 시 .is-loaded로 페이드 인 */
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  -webkit-user-drag:none;user-select:none
}
.ae-region-bg-img.is-loaded{opacity:1}
/* 시트가 펼쳐지면 배경이 살짝 밀려 올라감 (패럴랙스) */
.ae-region-popup.is-expanded .ae-region-bg-img{transform:translateY(-9%)}

/* ─── 바텀시트 ─── */
.ae-region-sheet{
  position:absolute;top:0;left:0;right:0;bottom:0;
  z-index:1;
  display:flex;flex-direction:column;
  background:#ffffff;
  transform:translateY(40%);                 /* 접힘: 팝업 높이의 40% 지점 */
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  touch-action:none;                         /* 접힘 상태에서는 제스처를 시트가 모두 처리 */
  will-change:transform
}
.ae-region-popup.is-expanded .ae-region-sheet{
  transform:translateY(0);                   /* 펼침: 배경을 완전히 덮음 */
  touch-action:pan-y                         /* 펼침 상태에서는 목록 스크롤에 양보 */
}

/* 드래그 핸들 바 */
.ae-sheet-handle{
  flex-shrink:0;
  padding:10px 0 6px;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none
}
.ae-sheet-handle:active{cursor:grabbing}
.ae-sheet-handle span{
  display:block;
  width:42px;height:4px;
  border-radius:2px;
  background:#d1d5db
}

/* 시트 내부 스크롤 — 접힘 상태에서는 스크롤을 잠그고 텍스트 선택도 막음
   (접힘 상태에서는 시트 어디를 잡아도 드래그가 되므로 드래그 중 텍스트가 선택되지 않도록) */
.ae-sheet-scroll{
  padding:6px 22px 22px;
  overscroll-behavior:none        /* 맨 위에서 아래로 당길 때 브라우저 기본 동작이 끼어들지 않도록 */
}
.ae-region-popup:not(.is-expanded) .ae-sheet-scroll{overflow:hidden}
.ae-region-popup:not(.is-expanded) .ae-region-sheet{user-select:none;-webkit-user-select:none}

/* ─── 시트 내용: 지역명 · 설명 · 동물 수 ─── */
.ae-region-head{padding:6px 0 4px}
/* 한글명 아래에 영문명을 세로로 배치 */
.ae-region-titles{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;margin-bottom:12px
}
.ae-region-title{
  color:var(--region-color);
  font-size:27px;font-weight:700;
  letter-spacing:-0.5px;line-height:1.1
}
.ae-region-eng{
  font-size:16px;font-weight:400;
  color:#4b5563
}
.ae-region-desc{
  font-size:16px;line-height:1.5;
  color:#4b5563;margin:0
}
.ae-region-count{
  font-size:16px;font-weight:500;
  color:#374151;                    /* 영문 지역명(.ae-region-eng)과 동일한 색 */
  margin:20px 0 12px
}

/* ─── 동물 목록 (원형 아이콘 + 우측 텍스트) ─── */
.ae-animal-grid{display:flex;flex-direction:column;gap:6px}
.ae-animal-card{
  display:flex;align-items:center;gap:16px;
  width:100%;
  background:none;border:none;box-shadow:none;
  padding:8px;
  color:#1f2937;cursor:pointer;
  text-align:left;
  font-family:inherit
}
.ae-animal-card:focus{outline:none}

/* 동물 아이콘 — 옅은 회색 원형 배경 위에 표시 */
.ae-animal-card-icon{
  width:88px;height:88px;
  border-radius:50%;
  background:rgb(248,248,248);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden
}
.ae-animal-card-icon img{
  width:78px;height:78px;
  object-fit:contain;
  display:block
}
.ae-animal-card-icon .ae-card-emoji{
  font-size:46px;line-height:1
}

/* 아이콘 오른쪽: 보전 상태 배지 · 한글명 · 영문명 */
.ae-animal-card-body{
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:0
}
.ae-animal-status{
  display:inline-block;
  padding:3px 7px;
  border-radius:4px;
  margin-bottom:6px;
  color:#ffffff;
  font-size:10.5px;font-weight:600;
  line-height:1.3;
  white-space:nowrap
}
.ae-animal-card-name{font-weight:600;font-size:19px;color:#1f2937;line-height:1.25}
.ae-animal-card-eng{font-size:14px;color:#9ca3af;margin-top:1px}

/* ─── 동물 상세: 전체 스크롤 + 큰 이미지 ─── */
.ae-animal-detail{color:#1f2937;padding:22px}
.ae-animal-image-wrap{
  text-align:center;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center
}
/* 영상(또는 대체 이미지) 래퍼: 좌우 패딩(22px)을 상쇄해 양옆에 꽉 차게 붙임.
   위쪽은 상단 바가 차지하므로 당기지 않습니다. */
.ae-animal-image-wrap:has(.ae-animal-video),
.ae-animal-image-wrap:has(.ae-animal-hero-fallback){
  position:relative;
  margin-left:-22px;margin-right:-22px
}
/* 동물 상세 영상 (팝업 폭에 꽉 차고 라운딩 없음 · 원본 4:3 = 960x720 비율) */
.ae-animal-video{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  background:#ffffff;
  object-fit:cover
}
/* 영상 파일이 아직 없는 동물 — 아이콘(없으면 이모지)으로 대체 표시 */
.ae-animal-hero-fallback{
  width:100%;
  aspect-ratio:4 / 3;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg, #f6f8fb 0%, #eef1f6 100%)
}
.ae-animal-hero-fallback img{
  width:44%;max-width:170px;height:auto;
  object-fit:contain;display:block
}
/* ─── 동물 상세 상단 바 (좌: 다른 동물 / 우: 사운드 · 닫기) ─── */
.ae-detail-topbar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  background:#ffffff;
  position:relative;z-index:6
}
.ae-topbar-actions{display:flex;align-items:center;gap:2px}
.ae-topbar-btn{
  display:flex;align-items:center;gap:5px;
  padding:8px 12px;
  border:none;border-radius:14px;
  background:transparent;
  color:#1f2937;
  font-family:inherit;font-size:16px;font-weight:600;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s ease
}
/* 눌렀을 때 밝은 회색으로 눌림을 표시 */
.ae-topbar-btn:active{background:#e9ecef}
.ae-topbar-btn:focus{outline:none}
.ae-topbar-btn svg{width:22px;height:22px;display:block;flex-shrink:0}
/* 아이콘 전용 버튼은 원형 */
.ae-topbar-icon{
  width:40px;height:40px;
  padding:0;border-radius:50%;
  justify-content:center
}
/* muted 상태에 따라 아이콘 하나만 표시 */
.ae-video-sound .ae-icon-sound-on{display:none}
.ae-video-sound .ae-icon-sound-off{display:block}
.ae-video-sound:not(.is-muted) .ae-icon-sound-on{display:block}
.ae-video-sound:not(.is-muted) .ae-icon-sound-off{display:none}

/* ─── 이름 · 지역 배지 · 영문명 · 설명 ─── */
.ae-animal-nameline{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:8px;margin:6px 0 2px
}
.ae-animal-name{
  color:#1f2937;
  font-size:27px;font-weight:800;
  letter-spacing:-0.5px;line-height:1.2
}
.ae-animal-region{
  padding:4px 13px;border-radius:12px;
  background:var(--region-color, #888);
  color:#ffffff;
  font-size:11.5px;font-weight:700;line-height:1.3;
  white-space:nowrap
}
.ae-animal-eng{font-size:15px;color:#9ca3af;margin-bottom:16px}
.ae-animal-desc{line-height:1.62;color:#4b5563;margin-bottom:0;font-size:15.5px}

/* ─── 정보 카드 (아이콘 + 항목명 + 값, 마지막에 자세히 보기 버튼) ─── */
.ae-info-card{
  background:#f6f7f8;
  border-radius:18px;
  padding:20px;
  margin-top:20px
}
.ae-info-row{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:18px
}
.ae-info-row:last-of-type{margin-bottom:0}
.ae-info-icon{
  width:23px;height:23px;flex-shrink:0;
  margin-top:1px;
  color:#4b5563;
  display:flex;align-items:center;justify-content:center
}
.ae-info-icon svg{width:100%;height:100%}
.ae-info-text{min-width:0}
.ae-info-label{
  font-size:15px;font-weight:700;color:#1f2937;
  margin-bottom:3px;line-height:1.4
}
.ae-info-value{font-size:15px;line-height:1.55;color:#9ca3af}

/* 정보 카드 안의 '동물 자세히 보기' — 어두운 알약 버튼 */
.ae-detail-more{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:fit-content;margin:22px auto 10px;
  padding:15px 40px 15px 44px;      /* 오른쪽 화살표만큼 왼쪽 여백을 조금 더 */
  border:none;border-radius:999px;
  background:#2b3038;color:#ffffff;
  font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease
}
.ae-detail-more:active{background:#4a505a}
.ae-detail-more:focus{outline:none}

/* 떠 있는 '동물 자세히 알아보기' 버튼.
   본문 버튼이 화면 밖에 있을 때만 팝업 하단에 나타납니다 (표시 여부는 index.html 의 watchDetailButton). */
/* 버튼 오른쪽 꺾쇠 — 누르면 다른 화면(슬라이드)이 열린다는 표시 */
.ae-detail-arrow{
  width:16px;height:16px;flex:0 0 auto;
  display:flex;align-items:center;color:#fff;opacity:.9
}
.ae-detail-arrow svg{width:100%;height:100%}

.ae-detail-float{
  position:absolute;left:50%;
  display:inline-flex;align-items:center;gap:7px;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(8px);
  opacity:0;pointer-events:none;
  padding:14px 34px;border:none;border-radius:999px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px) saturate(200%);
  -webkit-backdrop-filter:blur(6px) saturate(200%);
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  white-space:nowrap;                      /* 가운데 정렬(left:50%) 때문에 폭이 좁게 잡혀 줄바꿈되는 것 방지 */
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .22s ease, transform .22s ease, background .15s ease;
  z-index:3
}
.ae-detail-float.is-visible{opacity:1;transform:translateX(-50%);pointer-events:auto}
.ae-detail-float:active{background:rgba(74,80,90,.78)}
.ae-detail-float:focus{outline:none}

/* ─── 하단 YouTube 아웃링크 ─── */
.ae-youtube-link{
  display:flex;align-items:center;gap:9px;
  margin-top:6px;padding:16px 2px 2px;
  color:#1f2937;text-decoration:none;
  font-size:15px;font-weight:700;
  -webkit-tap-highlight-color:transparent
}
.ae-yt-icon{width:24px;height:24px;flex-shrink:0;display:block}
.ae-yt-arrow{
  width:17px;height:17px;
  color:#9ca3af;display:flex;align-items:center
}
.ae-yt-arrow svg{width:100%;height:100%}
/* ─── SVG 닫기 아이콘 ─── */
.ae-icon-close{
  width:16px;height:16px;
  display:block;
  filter:invert(1);              /* 검정 stroke → 흰색으로 (어두운 배경 버튼용 기본값) */
  pointer-events:none;
  -webkit-user-drag:none;user-select:none
}

/* 로딩·에러 */
#ae-loading{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(to bottom, #000824 0%, #051d6b 100%);color:#fff;z-index:9999
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#ae-error{
  position:fixed;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(to bottom, #000824 0%, #051d6b 100%);color:#fff;padding:20px;text-align:center;z-index:9999
}
#ae-error.show{display:flex}
#ae-error h2{color:#ff6b6b;margin-bottom:10px}
#ae-error p{color:rgba(255,255,255,.7);max-width:400px;line-height:1.6}

/* ============================================================
   🖼️ 이모지 → 이미지 (Twemoji SVG) 스타일
   ============================================================ */
/* 텍스트 내 인라인 이모지 이미지 (예: 제목, 라벨 안의 작은 이모지) */
.ae-emoji{
  display:inline-block;
  vertical-align:-0.125em;
  width:1em;height:1em;
  object-fit:contain;
  user-select:none;-webkit-user-drag:none
}
/* 로딩 화면 회전 이모지 이미지 */
.ae-loading-emoji{
  width:56px;height:56px;
  object-fit:contain;
  margin-bottom:18px;
  animation:spin 2s linear infinite
}
/* 에러 화면 이모지 이미지 */
.ae-error-emoji{
  display:inline-block;
  vertical-align:-0.18em;
  width:1.1em;height:1.1em;
  object-fit:contain;
  margin-right:4px
}

/* ─── 콘텐츠 슬라이드 뷰어 ─── */
.ae-slides-overlay{
  position:fixed;top:0;left:0;right:0;
  height:100vh;height:100dvh;
  z-index:40;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  animation:ae-fade-in .2s ease
}
.ae-slides-overlay[hidden]{display:none}
/* 스테이지: 트랙을 감싸는 뷰포트. overflow:hidden으로 좌우 슬라이드 숨김 */
.ae-slides-stage{
  /* 세로 이미지(768×1376)라 세로 공간이 부족하면 좌우에 여백이 생깁니다.
     화면 높이를 100% 사용해 그 여백이 생길 확률을 최소화합니다.
     (object-fit:contain이라 어떤 경우에도 이미지가 잘리지는 않습니다) */
  width:min(1200px, 100vw);
  height:min(100vh, 100dvh);
  overflow:hidden;
  touch-action:pan-y;             /* 세로 스크롤 허용, 가로 pan은 앱이 처리 */
  cursor:grab;
  user-select:none;-webkit-user-select:none;
  position:relative
}
.ae-slides-stage:active{cursor:grabbing}

/* 트랙: 슬라이드들을 가로로 나열, transform으로 이동 */
.ae-slides-track{
  display:flex;
  width:100%;height:100%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  will-change:transform
}
.ae-slides-track.is-dragging{
  transition:none                 /* 드래그 중에는 실시간 반응 */
}

/* 각 슬라이드: 트랙 폭의 100% 차지, 이미지는 컨테인으로 잘림 없이 표시 */
.ae-slides-item{
  flex:0 0 100%;
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;user-drag:none;
  pointer-events:none             /* 이미지가 이벤트를 잡지 않도록 → 스테이지가 스와이프 처리 */
}
/* 닫기 · 좌우 이동 버튼 (모두 원형 흰색) */
.ae-slides-close,
.ae-slides-nav{
  position:absolute;
  width:44px;height:44px;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.5);
  color:#111;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;z-index:2;
  transition:background .15s ease
}
.ae-slides-close:hover,.ae-slides-nav:hover,
.ae-slides-close:focus,.ae-slides-nav:focus{
  outline:none
}
.ae-slides-close{
  top:calc(16px + env(safe-area-inset-top, 0px));
  right:16px
}
.ae-slides-close .ae-icon-close{
  width:20px;height:20px;filter:none
}
/* 좌우 이동 버튼: 원의 바깥쪽을 화면 밖으로 빼서 슬라이드를 가리는 면적을 줄입니다.
   --nav-peek = 화면에 보이는 폭. 누를 수 있는 영역은 원 전체라 그대로 넉넉합니다. */
.ae-slides-nav{
  --nav-size:56px;
  --nav-peek:26px;
  width:var(--nav-size);height:var(--nav-size);
  top:50%;transform:translateY(-50%);
  /* 밝은 슬라이드 위에서도 버튼으로 보이도록 반투명 흰색보다 또렷하게 */
  background:rgba(0,0,0,15%);
  color:#ffffff;
}
.ae-slides-nav:active{background:rgba(222,226,235,.95)}
.ae-slides-prev{
  left:calc(var(--nav-peek) - var(--nav-size));
  justify-content:flex-end;padding-right:4px      /* 화살표를 보이는 쪽에 맞춤 */
}
.ae-slides-next{
  right:calc(var(--nav-peek) - var(--nav-size));
  justify-content:flex-start;padding-left:4px
}
.ae-slides-nav svg{width:20px;height:20px;display:block}
/* 인디케이터 (몇 / 몇) */
.ae-slides-indicator{
  position:absolute;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  left:50%;transform:translateX(-50%);
  color:#fff;font-size:11px;font-weight:600;
  background:rgba(0,0,0,.2);
  padding:4px 10px;border-radius:16px;
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)
}

/* ============================================================
   반응형 — 모바일(≤520px). 두 팝업 모두 데스크톱과 같은 중앙 팝업 구조를 씁니다.
   (여백·크기·라운딩은 기본 규칙을 그대로 따르고, 여기서는 내부 여백과 글자 크기만 조정)
   ============================================================ */
@media(max-width:520px){
  .ae-header{padding:calc(22px + env(safe-area-inset-top, 0px)) 20px 0}
  .ae-header-actions{top:calc(22px + env(safe-area-inset-top, 0px));right:10px;gap:2px}
  .ae-tagline{font-size:21px;padding-right:118px}
  .ae-brandline{margin-top:15px;font-size:13px}
  .ae-labels{--marker-badge:50px;--marker-ring:3px}
  .ae-region-btn{padding:7px 11px}

  /* 위아래 여백만 절반으로 줄이고 팝업 높이를 키움 (좌우 여백은 기본 14px 유지) */
  .ae-overlay,.ae-animal-overlay{
    padding:7px 14px;
    padding-top:calc(7px + env(safe-area-inset-top, 0px));
    padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px))
  }
  .ae-popup{max-height:95vh;max-height:95dvh}
  .ae-region-popup{height:95vh;height:95dvh}

  .ae-sheet-scroll{padding:6px 18px 22px}
  .ae-region-title{font-size:28px}
  .ae-animal-detail{padding:18px}
  .ae-animal-image-wrap:has(.ae-animal-video),
  .ae-animal-image-wrap:has(.ae-animal-hero-fallback){margin-left:-18px;margin-right:-18px}
  .ae-animal-name{font-size:24px}
  .ae-info-card{padding:18px}
  .ae-animal-card{gap:14px;padding:6px}
  .ae-animal-card-icon{width:76px;height:76px}
  .ae-animal-card-icon img{width:68px;height:68px}
  .ae-animal-card-icon .ae-card-emoji{font-size:40px}
  .ae-animal-card-name{font-size:18px}
  .ae-animal-card-eng{font-size:13px}

  .ae-slides-close{width:40px;height:40px;right:12px}
  .ae-slides-nav{--nav-size:50px;--nav-peek:24px}

  /* 좁은 화면에서는 좌우 여백을 줄여 긴 영문 문구도 한 줄로 들어가게 합니다
     (min-width 로 짧은 한글 문구일 때 버튼이 너무 작아지지 않게 유지) */
  .ae-detail-more{padding:15px 22px 15px 26px;min-width:200px;max-width:100%}
  .ae-detail-float{padding:14px 22px 14px 26px}
}
@media(max-width:380px){
  .ae-header{padding-left:16px;padding-right:16px}
  .ae-tagline{font-size:19px;padding-right:112px}
  .ae-brandline{margin-top:13px}
  .ae-region-name{display:none}
  .ae-region-btn{padding:8px 10px}
  .ae-region-title{font-size:26px}
  .ae-animal-card{gap:12px}
  .ae-animal-card-icon{width:66px;height:66px}
  .ae-animal-card-icon img{width:58px;height:58px}
}