/* =========================================================
   DOOGO GROUP — about-loc.css (그룹 소개 · 05 국내외 거점 탭)
   about.css 다음에 읽힙니다. 이 탭의 마크업은 ab-gl-* 이름만 쓰므로 예전 .ab-loc-* / .ab-map 규칙과 겹치지 않습니다.
   · 위: 소개 글(왼쪽) + 3D 거점 지도(오른쪽, canvas — about-loc.js)
   · 아래: 거점 카드 두 장(같은 높이) — 겹친 유리판 · 깊은 그림자 · 3D 구슬 아이콘 · 기울기 · 뉴질랜드 미니 3D 타일
   색: 지도와 같은 하나의 색 띠 — 대한민국(일렉트릭 블루 · 시안) → 바이올렛 → 오키드 → 뉴질랜드(코럴 · 로즈).
   움직임 멈추기(html.motion-off)는 처음부터 마지막 정지 상태, html.soft-motion 은 기울기만 뺍니다(스크립트).
   ========================================================= */

/* ---------- 배치 ---------- */
.ab-loc { overflow-x: clip; } /* 등장 · 3D 기울기 중에도 가로 스크롤이 생기지 않게 */
.ab-gl-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "copy map" "cards cards" "note note";
  column-gap: clamp(40px, 5vw, 88px);
  align-items: center;
}
.ab-gl-copy { grid-area: copy; min-width: 0; }
.ab-gl-copy .lead { margin-top: 24px; max-width: 36ch; }
.ab-gl-map { grid-area: map; }
.ab-gl-cards { grid-area: cards; }
.ab-gl-note { grid-area: note; margin-top: 28px; }

/* ---------- 3D 거점 지도 ---------- */
.ab-gl-map {
  position: relative; isolation: isolate; overflow: hidden; margin: 0; min-width: 0;
  aspect-ratio: 1 / .98;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(55% 42% at 64% 50%, rgba(104, 76, 255, .2), transparent 70%),
    radial-gradient(70% 55% at 42% 64%, rgba(10, 93, 226, .22), transparent 70%),
    linear-gradient(165deg, #050A1D 0%, #0B1238 45%, #071A33 80%, #04192A 100%);
  box-shadow:
    0 2px 4px rgba(6, 16, 38, .12),
    0 30px 60px -36px rgba(64, 56, 200, .55),
    0 70px 120px -60px rgba(6, 16, 38, .75);
}
/* 유리 테두리 · 위쪽 반사 */
.ab-gl-map::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 22%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* 색 띠 머리카락 테두리(시안 → 바이올렛 → 코럴) */
.ab-gl-map::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(104, 228, 255, .32) 0%, rgba(146, 108, 255, .12) 38%, rgba(146, 108, 255, .06) 62%, rgba(255, 138, 122, .3) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ab-gl-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ab-gl-cv[hidden] { display: none; }
.ab-gl-map.is-3d .ab-map-svg { display: none; }
.ab-gl-map:not(.is-3d) { aspect-ratio: 900 / 1020; } /* 스크립트가 없을 때: 예전 점 지도(SVG) */

/* 거점 이름표 — 빛기둥 꼭대기를 따라다님(스크립트가 transform 으로 위치) · 거점 색(--acc)을 띰 */
.ab-gl-label { --acc: 111, 200, 255; position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.ab-gl-label--nz { --acc: 255, 152, 140; }
.ab-gl-label-in {
  position: relative; display: grid; gap: 2px; padding: 9px 14px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 31, 72, .9), rgba(10, 16, 42, .88));
  border: 1px solid rgba(var(--acc), .3);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .7), 0 0 26px -10px rgba(var(--acc), .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #fff; line-height: 1.3; white-space: nowrap;
  transform: translate(18px, -50%);
  opacity: 0; translate: 0 8px; scale: .94;
  transition: opacity .6s var(--ease), translate .7s cubic-bezier(.2, .9, .25, 1.2), scale .7s cubic-bezier(.2, .9, .25, 1.2), border-color .4s, box-shadow .4s;
}
.ab-gl-label-in::before { /* 기둥 꼭대기에서 이름표로 이어지는 선 */
  content: ""; position: absolute; top: 50%; right: 100%; width: 14px; height: 1px;
  background: linear-gradient(90deg, rgba(var(--acc), .1), rgba(var(--acc), .9));
}
.ab-gl-label-in::after { /* 위 가장자리의 색 빛 */
  content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--acc), 0), rgba(var(--acc), .95), rgba(var(--acc), 0));
}
.ab-gl-label strong { font-size: .95rem; font-weight: 700; letter-spacing: -.02em; }
.ab-gl-label .en { font-size: .62rem; font-weight: 600; letter-spacing: .16em; color: rgb(var(--acc)); }
.ab-gl-label.is-flip .ab-gl-label-in { transform: translate(calc(-100% - 18px), -50%); }
.ab-gl-label.is-flip .ab-gl-label-in::before { right: auto; left: 100%; transform: scaleX(-1); }
.ab-gl-label.is-below .ab-gl-label-in { transform: translate(calc(-100% + 10px), 18px); }
.ab-gl-label.is-below .ab-gl-label-in::before { top: auto; bottom: 100%; right: 9px; width: 1px; height: 14px; background: linear-gradient(0deg, rgba(var(--acc), .9), rgba(var(--acc), .1)); }
.ab-gl-label.is-on .ab-gl-label-in { opacity: 1; translate: 0 0; scale: 1; }
.ab-gl-label.is-focus .ab-gl-label-in { border-color: rgba(var(--acc), .7); box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .6), 0 0 34px -6px rgba(var(--acc), .6), inset 0 1px 0 rgba(255, 255, 255, .2); scale: 1.05; }
/* 스크립트가 없을 때의 자리(예전 지도 기준) */
.ab-gl-map:not(.is-3d) .ab-gl-label-in { opacity: 1; translate: none; scale: none; transform: translateY(-50%); }
.ab-gl-map:not(.is-3d) .ab-gl-label-in::before { display: none; }
.ab-gl-map:not(.is-3d) .ab-gl-label--kr { left: calc(36.7% + 26px); top: 15.9%; }
.ab-gl-map:not(.is-3d) .ab-gl-label--nz { left: auto; right: calc(13% + 26px); top: 91.2%; }

/* 02 국가 거점 */
.ab-gl-cap {
  position: absolute; z-index: 2; right: clamp(18px, 2.6vw, 32px); top: clamp(18px, 2.6vw, 30px);
  text-align: right; color: var(--on-dark-2); font-size: .88rem; font-weight: 500; pointer-events: none;
}
.ab-gl-cap .en {
  display: block; margin-bottom: 8px; font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 500; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 28%, #CFCBFF 74%, #FFC0C4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 거점 카드 ---------- */
.ab-gl-cards {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  margin-top: clamp(48px, 6vw, 84px);
}
.ab-gl-cards::before { /* 카드 뒤로 번지는 은은한 거점 색 → 유리판이 떠 보이게 */
  content: ""; position: absolute; z-index: -2; inset: 4% -2% -14%; pointer-events: none;
  background:
    radial-gradient(42% 60% at 22% 60%, rgba(47, 139, 255, .08), transparent 70%),
    radial-gradient(34% 56% at 54% 40%, rgba(123, 99, 255, .05), transparent 70%),
    radial-gradient(42% 60% at 80% 58%, rgba(255, 111, 134, .075), transparent 70%);
}
.ab-gl-card { --acc: 47, 139, 255; position: relative; isolation: isolate; display: flex; min-width: 0; container: glcard / inline-size; }
.ab-gl-card--nz { --acc: 236, 88, 140; }
/* 겹친 유리판: 뒤에 한 장 더 */
.ab-gl-card::before {
  content: ""; position: absolute; z-index: -1; left: 22px; right: 22px; top: 22px; bottom: -12px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(233, 239, 249, .95));
  border: 1px solid rgba(11, 27, 51, .07);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .9), 0 26px 40px -26px rgba(11, 27, 51, .26);
  transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.ab-gl-card--nz::before { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(246, 236, 244, .95)); }
.ab-gl-card.is-hover::before { transform: translateY(5px) scale(.985); }

/* 등장: 아래에서 비스듬히 일어서며 (base.css 의 data-reveal 대신) */
.js .ab-gl-card[data-reveal] {
  opacity: 0; transform: perspective(1400px) translate3d(0, 56px, 0) rotateX(16deg); transform-origin: 50% 100%;
  transition: opacity .9s var(--ease) var(--d, 0s), transform 1.3s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
.js .ab-gl-card[data-reveal].is-in, .js .ab-gl-card[data-reveal]:focus-within { opacity: 1; transform: none; }

.ab-gl-face {
  --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --lift: 0px;
  position: relative; flex: 1; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "top" "dl" "foot";
  padding: 28px 28px 18px; border-radius: 22px; overflow: clip;
  background: linear-gradient(165deg, #FFFFFF 0%, #FCFBF8 42%, #F5F3EE 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(11, 27, 51, .05),
    0 10px 22px -12px rgba(11, 27, 51, .14),
    0 38px 64px -36px rgba(11, 27, 51, .32);
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), box-shadow .6s var(--ease);
}
/* 유리 가장자리(위·왼쪽은 밝게, 아래는 거점 색) */
.ab-gl-face::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 1) 0%, rgba(11, 27, 51, .07) 38%, rgba(11, 27, 51, .07) 70%, rgba(var(--acc), .26) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* 포인터를 따라가는 빛 */
.ab-gl-face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--acc), .075), rgba(var(--acc), 0) 46%);
  transition: opacity .5s var(--ease);
}
.ab-gl-card.is-hover .ab-gl-face {
  --lift: -6px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .6s var(--ease);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(11, 27, 51, .05),
    0 18px 30px -16px rgba(11, 27, 51, .18),
    0 56px 80px -40px rgba(var(--acc), .34);
}
.ab-gl-card.is-hover .ab-gl-face::after { opacity: 1; }
.ab-gl-face > * { position: relative; z-index: 1; }

/* 머리: 구슬 · 나라 · 개수 */
.ab-gl-top { grid-area: top; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ab-gl-country { font-size: .85rem; font-weight: 600; color: var(--muted); }
.ab-gl-country .en { margin-left: 4px; font-size: .68rem; letter-spacing: .14em; }
.ab-gl-head h3 { font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.35; }
.ab-gl-count {
  align-self: start; display: inline-flex; align-items: baseline; gap: 2px;
  font-size: clamp(2rem, 2.8vw, 2.6rem); font-weight: 500; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(180deg, #43B6FF 0%, #1F72F2 52%, #0A4FC4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 10px rgba(var(--acc), .22));
  translate: calc(var(--px) * -5px) calc(var(--py) * -4px);
  transition: translate .5s var(--ease);
}
.ab-gl-card--nz .ab-gl-count { background-image: linear-gradient(180deg, #FF907A 0%, #EC5288 52%, #8E52EC 100%); }
.ab-gl-count i { align-self: center; margin-inline: 3px; font-style: normal; font-size: .62em; font-weight: 400; color: var(--blue-300); -webkit-text-fill-color: var(--blue-300); }

/* 3D 구슬(지구) — 거점 색 그라데이션 · 반사광 · 천천히 도는 자오선 · 거점 점 */
.ab-gl-orb {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(220, 248, 255, .9) 0%, rgba(150, 228, 255, 0) 30%),
    radial-gradient(circle at 34% 30%, #6AD8FF 0%, #2F8BFF 30%, #0A5DE2 58%, #073C9F 82%, #041E58 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .45),
    inset -5px -7px 12px rgba(2, 14, 52, .5),
    inset 4px 3px 10px rgba(120, 230, 255, .25),
    0 14px 22px -10px rgba(20, 112, 255, .7),
    0 3px 6px -2px rgba(10, 93, 226, .35);
  translate: calc(var(--px) * 7px) calc(var(--py) * 6px);
  transition: translate .5s var(--ease), transform .8s cubic-bezier(.2, .8, .2, 1);
}
.ab-gl-card--nz .ab-gl-orb {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 238, 228, .92) 0%, rgba(255, 200, 180, 0) 30%),
    radial-gradient(circle at 34% 30%, #FFB496 0%, #FF7A8A 22%, #D856B0 44%, #8048E4 70%, #33228F 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .5),
    inset -5px -7px 12px rgba(36, 10, 84, .45),
    inset 4px 3px 10px rgba(255, 190, 160, .3),
    0 14px 22px -10px rgba(222, 79, 140, .6),
    0 3px 6px -2px rgba(134, 69, 220, .3);
}
.ab-gl-orb::before { /* 반사광 */
  content: ""; position: absolute; z-index: 2; left: 13%; top: 8%; width: 46%; height: 32%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); transform: rotate(-24deg); pointer-events: none;
}
.ab-gl-orb::after { /* 바닥 그림자 */
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -10px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--acc), .26), rgba(var(--acc), 0));
}
.ab-gl-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-gl-orb-lat, .ab-gl-orb-mer { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1.1; }
.ab-gl-orb-mer { transform-box: fill-box; transform-origin: center; animation: abGlMer 15s cubic-bezier(.37, 0, .63, 1) infinite; }
.ab-gl-orb-mer:nth-of-type(2) { animation-delay: -5s; }
.ab-gl-orb-mer:nth-of-type(3) { animation-delay: -10s; }
@keyframes abGlMer { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.ab-gl-orb-pt { fill: #fff; stroke: #0A5DE2; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(170, 230, 255, .95)); }
.ab-gl-card--nz .ab-gl-orb-pt { stroke: #E2457A; filter: drop-shadow(0 0 3px rgba(255, 200, 190, .95)); }
.ab-gl-orb-ping { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: abGlPing 2.6s var(--ease) infinite; }
@keyframes abGlPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.ab-gl-card.is-hover .ab-gl-orb { transform: translateY(-3px) rotate(-8deg) scale(1.05); }
.ab-gl-card.is-paused .ab-gl-orb-mer, .ab-gl-card.is-paused .ab-gl-orb-ping { animation-play-state: paused; }

/* 정보 줄 */
.ab-gl-dl { grid-area: dl; margin-top: 20px; border-top: 1px solid var(--line); min-width: 0; }
.ab-gl-dl > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 0; min-width: 0; }
.ab-gl-dl > div + div { border-top: 1px solid var(--line-2); }
.ab-gl-dl dt { font-size: .84rem; color: var(--muted); }
.ab-gl-dl dd { min-width: 0; font-size: .96rem; font-weight: 600; }
.ab-gl-addr small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.ab-gl-addr-l { display: inline-block; max-width: 100%; } /* 영문 주소는 쉼표 자리에서만 줄바꿈(먼저 'Drive,' 뒤, 좁으면 'Auckland,' 뒤) */

/* 태그: 줄바꿈이 깔끔하도록 같은 너비 칸(2칸 → 넓으면 4칸) */
.ab-gl-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.ab-gl-tags--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-gl-tags li {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; max-width: 100%;
  min-height: 30px; padding: 4px 10px; border-radius: 8px;
  background: linear-gradient(180deg, #FFFFFF, #F7F6F2);
  border: 1px solid rgba(11, 27, 51, .1);
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px -3px rgba(11, 27, 51, .18);
  font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); white-space: nowrap;
}
.ab-gl-tags li.is-hold {
  background: linear-gradient(180deg, #1B2A47, #0A1426); border-color: #0A1426; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 12px -6px rgba(10, 20, 38, .55);
}
.ab-gl-tags li.is-global { /* 뉴질랜드 색 띠(바이올렛 → 로즈) — 흰 글자 대비 4.5:1 이상 */
  background: linear-gradient(115deg, #5A40E4 0%, #9A3FC8 52%, #C8336A 100%); border-color: rgba(90, 40, 140, .35); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px -6px rgba(170, 60, 150, .55);
}
.ab-gl-tags li span { font-weight: 600; }
.ab-gl-tags li span + span { font-weight: 500; opacity: .85; }

.ab-gl-foot { grid-area: foot; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 6px; min-width: 0; }
.ab-gl-link { display: inline-flex; min-height: 44px; font-size: .9rem; color: var(--blue); }

/* 줄마다 차례로 */
.js .ab-gl-card[data-reveal] :is(.ab-gl-top, .ab-gl-dl > div, .ab-gl-foot) {
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0s) + .25s + var(--i, 0) * .08s);
}
.js .ab-gl-card[data-reveal] .ab-gl-top { --i: -1; }
.js .ab-gl-card[data-reveal] .ab-gl-foot { --i: 3; }
.js .ab-gl-card[data-reveal]:is(.is-in, :focus-within) :is(.ab-gl-top, .ab-gl-dl > div, .ab-gl-foot) { opacity: 1; transform: none; }

/* 뉴질랜드 미니 3D 타일 — 색 띠 점으로 그린 뉴질랜드가 비스듬히 누운 판 + 코럴 빛기둥 + 파동 */
.ab-gl-mini { grid-area: mini; position: relative; min-width: 0; min-height: 132px; pointer-events: none; perspective: 640px; }
.ab-gl-mini-plane {
  position: absolute; left: 50%; top: 50%; width: min(86%, 210px); aspect-ratio: 1;
  translate: -50% -46%; transform: rotateX(56deg) rotateZ(-32deg); transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.ab-gl-mini-plane::before { /* 타일 판(옅은 색 유리) + 아래로 번지는 빛 */
  content: ""; position: absolute; inset: 1%; border-radius: 21%;
  background:
    radial-gradient(closest-side at 57% 54%, rgba(255, 111, 134, .12), rgba(255, 111, 134, 0)),
    linear-gradient(135deg, rgba(62, 155, 255, .09) 0%, rgba(123, 99, 255, .07) 46%, rgba(255, 124, 110, .1) 100%);
  border: 1px solid rgba(123, 99, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 40px 6px rgba(123, 99, 255, .1);
}
.ab-gl-mini-plane svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-gl-mini-grid { fill: none; stroke: rgba(123, 99, 255, .2); stroke-width: 1; }
.ab-gl-mini-dots { fill: none; stroke: #7B63FF; stroke: url(#ab-gl-mini-ink) #7B63FF; stroke-width: 5.4; stroke-linecap: round; }
.ab-gl-mini-pin { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.ab-gl-mini-pin i {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid rgba(240, 70, 120, .6);
  animation: abGlRing 2.8s cubic-bezier(.2, .7, .2, 1) infinite;
}
.ab-gl-mini-pin i:nth-child(2) { animation-delay: -1.4s; border-color: rgba(140, 90, 255, .5); }
@keyframes abGlRing { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.ab-gl-mini-pin::before { /* 판 위의 핀 점 */
  content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, #FF9A7E, #E8417E); box-shadow: 0 0 0 3px #fff, 0 0 16px 5px rgba(240, 80, 120, .42);
}
.ab-gl-mini-pin b { /* 서 있는 빛기둥 */
  position: absolute; left: -2px; bottom: 0; width: 4px; height: 92px; border-radius: 2px;
  transform-origin: 50% 100%; transform: rotateX(-90deg);
  background: linear-gradient(0deg, #E8417E 0%, #FF7F7A 42%, #FFC9B6 82%, #FFF1EA 100%);
  box-shadow: 0 0 10px 3px rgba(255, 100, 128, .3), 0 0 24px 7px rgba(255, 110, 140, .12);
  transition: height .8s cubic-bezier(.2, .8, .2, 1);
}
.ab-gl-mini-pin b::after { /* 기둥 꼭대기 빛 */
  content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, #FF8A7A 30%, rgba(255, 120, 130, .35) 48%, rgba(255, 120, 130, 0) 72%);
}
.ab-gl-card.is-hover .ab-gl-mini-plane { transform: rotateX(52deg) rotateZ(-24deg); }
.ab-gl-card.is-hover .ab-gl-mini-pin b { height: 110px; }
.ab-gl-card.is-paused .ab-gl-mini-pin i { animation-play-state: paused; }
.js .ab-gl-card[data-reveal] .ab-gl-mini { opacity: 0; transform: translate3d(0, 18px, 0) scale(.94); transition: opacity .9s var(--ease) calc(var(--d, 0s) + .5s), transform 1.2s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + .5s); }
.js .ab-gl-card[data-reveal]:is(.is-in, :focus-within) .ab-gl-mini { opacity: 1; transform: none; }

/* 뉴질랜드 카드: 정보 줄 오른쪽 칸에 미니 타일 (카드 높이를 맞춘 만큼 남는 자리를 채움) */
.ab-gl-card--nz .ab-gl-face { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); grid-template-areas: "top top" "dl mini" "foot mini"; column-gap: 12px; }
.ab-gl-card--nz .ab-gl-mini { min-height: 224px; } /* 미니 타일(판 + 기둥)이 카드 안에 다 들어가도록 */
@container glcard (min-width: 600px) {
  .ab-gl-tags--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container glcard (max-width: 520px) { /* 두 장이 나란한 좁은 카드: 이름 칸을 줄여 주소가 두 줄에 들어가게 */
  .ab-gl-dl > div { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .ab-gl-card--nz .ab-gl-face { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); }
}
@container glcard (max-width: 380px) {
  .ab-gl-dl > div { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 12px 0; }
  .ab-gl-dl dt { font-size: .78rem; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .ab-gl-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "map" "cards" "note"; }
  .ab-gl-map { margin-top: 40px; aspect-ratio: 16 / 11; }
  .ab-gl-cards { margin-top: 28px; }
}
@media (max-width: 860px) {
  .ab-gl-cards { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-gl-map { aspect-ratio: 4 / 3.3; }
}
@media (max-width: 600px) {
  .ab-gl-map { aspect-ratio: 1 / 1.06; margin-top: 32px; border-radius: 22px; }
  .ab-gl-cap { top: auto; right: auto; left: 18px; bottom: 16px; text-align: left; font-size: .8rem; }
  .ab-gl-cap .en { font-size: 2.2rem; margin-bottom: 4px; }
  .ab-gl-cap-sub { display: none; }
  .ab-gl-label-in { padding: 7px 10px 8px; border-radius: 10px; }
  .ab-gl-label strong { font-size: .8rem; }
  .ab-gl-label .en { font-size: .54rem; letter-spacing: .13em; }
  .ab-gl-label-in::before { width: 10px; }
  .ab-gl-label-in { transform: translate(12px, -50%); }
  .ab-gl-label.is-flip .ab-gl-label-in { transform: translate(calc(-100% - 12px), -50%); }
  .ab-gl-label.is-below .ab-gl-label-in { transform: translate(calc(-100% + 10px), 16px); }
  .ab-gl-face { padding: 22px 20px 12px; border-radius: 20px; }
  .ab-gl-card::before { left: 16px; right: 16px; bottom: -10px; border-radius: 20px; }
  .ab-gl-top { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; }
  .ab-gl-orb { width: 48px; height: 48px; }
  .ab-gl-head h3 { font-size: 1.16rem; }
  .ab-gl-count { font-size: 1.8rem; }
  .ab-gl-card--nz .ab-gl-face { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); column-gap: 8px; }
  .ab-gl-mini-plane { width: min(92%, 136px); }
  .ab-gl-card--nz .ab-gl-mini { min-height: 172px; }
  .ab-gl-mini-pin b { height: 64px; }
  .ab-gl-card.is-hover .ab-gl-mini-pin b { height: 72px; }
}

/* ---------- 움직임 멈추기: 마지막 정지 상태 ---------- */
html.motion-off .ab-gl-card[data-reveal], html.motion-off .ab-gl-card[data-reveal] :is(.ab-gl-top, .ab-gl-dl > div, .ab-gl-foot, .ab-gl-mini) { opacity: 1 !important; transform: none !important; transition: none !important; }
html.motion-off .ab-gl-face { --rx: 0deg !important; --ry: 0deg !important; --px: 0 !important; --py: 0 !important; transition: none !important; }
html.motion-off :is(.ab-gl-orb-mer, .ab-gl-orb-ping, .ab-gl-mini-pin i) { animation: none !important; }
html.motion-off .ab-gl-orb-mer:nth-of-type(1) { transform: scaleX(.92); }
html.motion-off .ab-gl-orb-mer:nth-of-type(2) { transform: scaleX(.5); }
html.motion-off .ab-gl-orb-mer:nth-of-type(3) { transform: scaleX(.08); }
html.motion-off .ab-gl-orb-ping { opacity: 0; }
html.motion-off .ab-gl-mini-pin i { transform: scale(1); opacity: .45; }
html.motion-off .ab-gl-mini-pin i:nth-child(2) { display: none; }
html.motion-off :is(.ab-gl-label-in, .ab-gl-orb, .ab-gl-count, .ab-gl-mini-plane, .ab-gl-mini-pin b, .ab-gl-card::before) { transition: none !important; }