@charset "utf-8";

/*
 * File    : style.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * DEMO PAGE
 * GLOBE
 * DATA NETWORK
 * SECTION TEXT
 * RESPONSIVE
 *
 * --u는 데스크톱 1900px, 모바일 390px 기준의 비례 단위.
 * 투영 좌표와 터치 영역은 CSS px를 유지.
 * 독립 섹션의 타이포는 사이트 공통 타입스케일과 분리.
 */


/* **************************************** *
 * DEMO PAGE
 * **************************************** */
/* 블랙앤화이트 : 강조색은 script.js 의 init 에서 흰색으로 직접 넘김 */
.rgs, .main-data { --u: 1px; }
.rgs { background: #000; color: #fff; font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; }

.rgs__context { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: calc(80 * var(--u)) calc(40 * var(--u)); box-sizing: border-box; text-align: center; }
.rgs__context--next { min-height: 60vh; border-top: 1px solid #1a1a1b; }
.rgs__eyebrow { margin: 0 0 calc(16 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: .2em; color: #999; }
.rgs__headline { margin: 0; font-size: calc(80 * var(--u)); font-weight: 700; line-height: 1.1; }
.rgs__desc { margin: calc(20 * var(--u)) 0 0; font-size: calc(18 * var(--u)); color: #999; }


/* **************************************** *
 * GLOBE
 * **************************************** */
/* 섹션 : 지구 캔버스가 배경 레이어, 텍스트는 그 위 */
.main-data { position: relative; height: calc(1197 * var(--u)); overflow: hidden; background: #000; }

/* 컨테이너 = 캔버스 영역 (섹션 전체). 엔진이 canvas 를 이 안에 생성 */
.jt-region-globe { position: absolute; inset: 0; overflow: hidden; }

/* 지구 실루엣은 anchor 정사각형의 내접원에 맞춤 */
.jt-region-globe__anchor { position: absolute; z-index: 2; top: calc(60 * var(--u)); right: 0;    width: calc(1160 * var(--u)); aspect-ratio: 1; visibility: hidden; pointer-events: none; }
/* 전체 보기에서 지구 윤곽을 표시하고 확대 시 숨김 */
.jt-region-globe__anchor::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; box-shadow: 0 0 calc(80 * var(--u)) rgba(255, 255, 255, .08), inset 0 0 calc(140 * var(--u)) rgba(255, 255, 255, .09); visibility: visible; opacity: 0; transition: opacity .2s; }
.jt-region-globe.is-global .jt-region-globe__anchor::after { opacity: 1; transition-duration: .4s; }

/* 대체 이미지 : WebGL 이 없거나 로드 전. 엔진 첫 프레임 후 is-loaded 로 제거 */
.jt-region-globe__poster { position: absolute; inset: 0; background: no-repeat center / cover; transition: opacity .6s; }
.jt-region-globe__poster.is-loaded { opacity: 0; }

.jt-region-globe__canvas { z-index: 1; }


/* **************************************** *
 * DATA NETWORK (dng)
 * **************************************** */
/* 표시·숨김은 script.js 의 hidden 속성. display 를 지정한 요소라 hidden 을 다시 걸어 둠 */
.jt-region-globe [hidden],
.dng-panel[hidden],
.dng-panel__stats > div[hidden] { display: none; }

/* 투영 라벨 층 : 캔버스 위. 클릭은 버튼만 받음 */
.dng-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dng-layer button { pointer-events: auto; }

/* 버튼 공통 초기화 + 포커스 가시성 */
.dng-cluster,
.dng-spot,
.dng-back,
.dng-panel__close { margin: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dng-cluster:focus-visible,
.dng-spot:focus-visible,
.dng-back:focus-visible,
.dng-panel__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 권역 라벨: transform은 투영 위치, translate는 가운데 정렬과 높이 보정 */

.dng-cluster { position: absolute; top: 0; left: 0; z-index: 1; display: inline-flex; flex-direction: row; align-items: center; gap: calc(10 * var(--u)); min-width: 24px; min-height: 24px; padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)); border: 0; border-radius: 999px; background: #e2e2e4; color: #000; white-space: nowrap; text-align: left; translate: -50% calc(-100% - var(--lift, 10 * var(--u))); will-change: transform; transition: background-color .2s, box-shadow .2s; }
/* 권역 라벨 앞 원형 기호 */
.dng-cluster::before { content: ''; flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); translate: 0 calc(-0.6 * var(--u));    border-radius: 50%; background: currentColor; }

.dng-cluster:hover,
.dng-cluster.is-active { background: #fff; box-shadow: 0 0 calc(18 * var(--u)) rgba(255, 255, 255, .3); }

.dng-cluster__name { font-size: calc(15 * var(--u)); font-weight: 700; line-height: 1.6; }
.dng-cluster__sites { font-size: calc(12 * var(--u)); font-weight: 500; line-height: 1.6; color: rgba(0, 0, 0, .55); translate: 0 calc(1 * var(--u)); }
/* 뒤편 권역은 오른쪽 고정 버튼, 앞면 권역은 투영 위치에 표시 */
.dng-cluster.is-pin-right { top: calc(300 * var(--u)); right: calc(40 * var(--u)); left: auto; padding-right: calc(52 * var(--u)); translate: none; transform: none !important; }
.dng-cluster:not(.is-pin-right) .dng-cluster__arrow { display: none; }
.dng-cluster__arrow { position: absolute; top: 50%; right: calc(22 * var(--u)); margin-top: calc(-10 * var(--u)); font-size: calc(18 * var(--u)); font-style: normal; line-height: calc(20 * var(--u)); transition: transform .2s; }
.dng-cluster.is-pin-right:hover .dng-cluster__arrow { transform: translateX(calc(3 * var(--u))); }
/* 거점 터치 영역은 24px. 라벨 방향은 script.js의 data-side로 지정 */
.dng-spot { --size: 10px; --dot: var(--size); --rot: 0deg; --scale: 1; --gap: calc(8 * var(--u)); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; white-space: nowrap; text-align: left; will-change: transform; }
/* 호버와 선택 상태의 마커 크기 */
.dng-spot:hover { --scale: 1.2; z-index: 2; }
.dng-spot:focus-visible { --scale: 1.2; }
.dng-spot.is-active { --scale: 1.4; z-index: 2; }
.dng-spot__dot { flex: none; box-sizing: border-box; width: var(--dot); height: var(--dot); transform: rotate(var(--rot)) scale(var(--scale)); transition: transform .2s; }
.dng-spot__label { position: absolute; top: 50%; left: calc(50% + var(--dot) / 2 + var(--gap)); translate: 0 -50%; display: none; padding: calc(3 * var(--u)) calc(8 * var(--u)); border: 1px solid rgba(255, 255, 255, .15); border-radius: calc(4 * var(--u)); background: rgba(0, 0, 0, .85); font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.3; transition: background-color .3s, color .3s, border-color .3s; }
/* 선택 전 호버 시 라벨 테두리 강조 */
.dng-spot:not(.is-active):hover .dng-spot__label,
.dng-spot:not(.is-active):focus-visible .dng-spot__label { border-color: rgba(255, 255, 255, .4); }
.dng-spot__label small { margin-left: calc(4 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, .65); }
.dng-spot[data-side="left"] .dng-spot__label { left: auto; right: calc(50% + var(--dot) / 2 + var(--gap)); }
.dng-spot[data-side="top"] .dng-spot__label,
.dng-spot[data-side="bottom"] .dng-spot__label { left: 50%; translate: -50% 0; }
.dng-spot[data-side="top"] .dng-spot__label { top: auto; bottom: calc(50% + var(--dot) / 2 + var(--gap) / 2); }
.dng-spot[data-side="bottom"] .dng-spot__label { top: calc(50% + var(--dot) / 2 + var(--gap) / 2); }
/* 대각선 자리(모바일 고른 라벨) : 위·아래 칸에서 가로 위치는 script.js 가 --lx(점 중심 기준 px)로 지정 */
.dng-spot[data-side^="top-"] .dng-spot__label,
.dng-spot[data-side^="bottom-"] .dng-spot__label { left: calc(50% + var(--lx, 0px)); right: auto; translate: 0 0; }
.dng-spot[data-side^="top-"] .dng-spot__label { top: auto; bottom: calc(50% + var(--dot) / 2 + var(--gap) / 2); }
.dng-spot[data-side^="bottom-"] .dng-spot__label { top: calc(50% + var(--dot) / 2 + var(--gap) / 2); }.dng-spot.is-labeled { z-index: 1; }
/* 선택한 거점 강조 및 나머지 거점의 밝기 조절 */
.dng-spot.is-active { z-index: 3; }
.dng-spot.is-active .dng-spot__label { border-color: #fff; background: #fff; color: #000; }
.dng-spot.is-active .dng-spot__label small { color: rgba(0, 0, 0, .6); }
/* 데스크톱 묶음 라벨은 대표 이름과 추가 거점 수 표시 */
.dng-spot__more { display: none; margin-left: calc(6 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: calc(11 * var(--u)); font-weight: 700; line-height: 1.5; vertical-align: 1px; }
.dng-spot.is-group .dng-spot__more { display: inline-block; }
.dng-spot.is-group .dng-spot__label small { display: none; }
.dng-spot.is-grouping { z-index: 3; }
.dng-spot.is-grouping .dng-spot__label { border-color: #fff; background: #fff; color: #000; }
.dng-spot.is-grouping .dng-spot__more { background: rgba(0, 0, 0, .12); }
.dng-spot.is-grouping,
.dng-spot.is-group-member { --scale: 1.2; }
.dng-spot.is-group-member { z-index: 2; }
.dng-spot.is-hot { --scale: 1.5; z-index: 3; }
.jt-region-globe.has-group .dng-spot:not(.is-grouping):not(.is-group-member) .dng-spot__dot,
.jt-region-globe.has-group .dng-spot:not(.is-grouping) .dng-spot__label { opacity: .35; transition: opacity .25s; }
.dng-group { position: absolute; z-index: 4; box-sizing: border-box; width: calc(260 * var(--u)); padding: calc(8 * var(--u)) 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: calc(4 * var(--u)); background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; animation: dng-panel-pop .55s cubic-bezier(.22, 1, .36, 1) both; }
.dng-group[hidden] { display: none; }
.dng-group__head { margin: 0; padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.dng-group__list { margin: 0; padding: 0; list-style: none; }
.dng-group__list button { display: flex; align-items: center; gap: calc(12 * var(--u)); box-sizing: border-box; width: 100%; padding: calc(10 * var(--u)) calc(20 * var(--u)); border: 0; background: none; color: #fff; font: inherit; font-size: calc(14 * var(--u)); text-align: left; cursor: pointer; transition: background-color .2s; }
.dng-group__list button:hover,
.dng-group__list button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.dng-group__list b { flex: 1; font-weight: 600; }
.dng-group__list small { font-size: calc(12 * var(--u)); color: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: reduce) { .dng-group { animation: none; } }
/* 거점 기호의 장식 기준 위치 */
.dng-spot__dot { position: relative; }
.jt-region-globe.has-selected .dng-spot:not(.is-active):not(:hover):not(:focus-visible) .dng-spot__dot,
.jt-region-globe.has-selected .dng-spot:not(.is-active):not(:hover):not(:focus-visible) .dng-spot__label { opacity: .35; transition: opacity .25s; }
/* 단일 거점 권역의 점과 라벨 강조 */


.dng-spot.is-solo.is-active,
.dng-spot.is-solo:hover { --scale: 1.15; }   /* 단일 거점은 호버·선택 확대율을 제한 */
.dng-spot.is-solo .dng-spot__label { font-size: calc(15 * var(--u)); }
.dng-spot.is-solo .dng-spot__label small { font-size: calc(12 * var(--u)); }
@keyframes dng-solo {
    from { opacity: .9; transform: scale(.55); }
    to { opacity: 0; transform: scale(1.35); }
}
.dng-spot.is-labeled .dng-spot__label,
.dng-spot.is-active .dng-spot__label,
.dng-spot:hover .dng-spot__label,
.dng-spot:focus-visible .dng-spot__label { display: block; }

/* 유형 범례: 거점과 동일한 기호 사용 */

.dng-legend { position: absolute; right: calc(190 * var(--u)); bottom: calc(293 * var(--u)); z-index: 3; display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(20 * var(--u)); margin: 0; padding: 0; list-style: none; font-size: calc(12 * var(--u)); line-height: 1.4; color: rgba(255, 255, 255, .7); pointer-events: none; }
.dng-legend li { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.dng-legend__mark { --size: 10px; --dot: var(--size); --rot: 0deg; flex: none; box-sizing: border-box; width: var(--dot); height: var(--dot); transform: rotate(var(--rot)); }

/* 유형 기호: 원, 마름모, 삼각형, 사각형, 점선 원, 십자 */
.dng-spot--drone .dng-spot__dot,
.dng-legend__mark.dng-spot--drone { border-radius: 50%; background: #fff; box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 255, 255, .6); }
/* 빈 마름모 : 네모 테두리를 45° 돌리고, 대각선이 다른 모양 지름과 비슷하도록 조금 줄임 */
.dng-spot--vehicle,
.dng-legend__mark.dng-spot--vehicle { --rot: 45deg; }
.dng-spot--vehicle .dng-spot__dot,
.dng-legend__mark.dng-spot--vehicle { border: 3px solid #fff; transform: rotate(var(--rot)) scale(calc(var(--scale, 1) * .56)); }
.dng-spot--army .dng-spot__dot,
.dng-legend__mark.dng-spot--army { background: #fff; clip-path: polygon(50% 4%, 98% 92%, 2% 92%); }
.dng-spot--project .dng-spot__dot,
.dng-legend__mark.dng-spot--project { background: #fff; border-radius: 1px; transform: rotate(var(--rot)) scale(calc(var(--scale, 1) * .86)); }
.dng-spot--mobile .dng-spot__dot,
.dng-legend__mark.dng-spot--mobile { border: 2px dotted #fff; border-radius: 50%; }
/* 십자 : 가로·세로 막대 2개(2px) */
.dng-spot--field .dng-spot__dot,
.dng-legend__mark.dng-spot--field { background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 100% no-repeat; transform: rotate(var(--rot)) scale(calc(var(--scale, 1) * .75)); }

/* 권역 확대 화면의 Global 복귀 버튼 */

.dng-back { position: absolute; right: calc(40 * var(--u)); bottom: calc(283 * var(--u)); z-index: 3; display: inline-flex; align-items: center; min-width: 24px; min-height: 24px; padding: calc(8 * var(--u)) calc(32 * var(--u)) calc(8 * var(--u)) calc(26 * var(--u)); border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(0, 0, 0, .6); font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1.4; transition: border-color .2s; }
/* 호버 시 복귀 버튼 테두리 강조 */
.dng-back:hover { border-color: #fff; }
/* 복귀 화살표는 SVG 마스크를 반전하여 글자색으로 표시 */
.dng-back { gap: calc(6 * var(--u)); }
.dng-back__icon { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u));    background: currentColor; -webkit-mask: url('assets/icon-arrow.svg') center / contain no-repeat; mask: url('assets/icon-arrow.svg') center / contain no-repeat; transform: scaleX(-1); }

/* 데스크톱 하단 탐색 바: Global 버튼과 유형 필터 */
.dng-dock { display: contents; }
@media (min-width: 861px) {
    .dng-dock { position: absolute; left: 72%;    bottom: calc(273 * var(--u)); z-index: 3; display: flex; align-items: stretch; gap: calc(8 * var(--u)); transform: translateX(-50%);    white-space: nowrap; }
    .dng-dock[hidden] { display: none; }
    /* 선택한 유형을 반전 색상으로 표시 */
    .dng-dock .dng-legend { position: static; display: flex; flex-wrap: nowrap; gap: 2px; padding: calc(3 * var(--u)); border-radius: 2px; background: #e2e2e4;    box-shadow: none; font-size: calc(13 * var(--u)); color: rgba(0, 0, 0, .6); }
    .dng-dock .dng-legend li { position: relative; padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: 2px; }
    /* 유형 필터 선택·호버·포커스 상태 */
    .dng-dock .dng-legend { pointer-events: auto; }
    .dng-dock .dng-legend li { cursor: pointer; transition: color .2s, background-color .2s; }
    .dng-dock .dng-legend li:hover { color: #000; }
    .dng-dock .dng-legend li:not(.is-on) .dng-legend__mark { opacity: .7; transition: opacity .2s; }
    .dng-dock .dng-legend li:hover .dng-legend__mark { opacity: 1; }
    .dng-dock .dng-legend li:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
    .dng-dock .dng-legend li.is-on { color: #fff; background: #000; }
    .dng-dock .dng-legend__all { font-weight: 600; }
    /* Global 버튼과 유형 필터 사이 간격 */


    /* 탐색 바의 유형 기호는 10px 영역에 맞춤 */
    .dng-dock .dng-legend__mark { transform: rotate(var(--rot)); box-shadow: none; }
    .dng-dock .dng-legend__mark.dng-spot--vehicle { border-width: 2px; transform: rotate(var(--rot)) scale(.707); }

    .dng-dock .dng-back { position: static; padding: calc(9 * var(--u)) calc(26 * var(--u)) calc(9 * var(--u)) calc(18 * var(--u));    border: 0; border-radius: 2px; background: #fff; color: #000; box-shadow: none; font-size: calc(13 * var(--u)); font-weight: 700; transition: box-shadow .2s; }
    .dng-dock .dng-back:hover { background: #e2e2e4; }
    .dng-dock .dng-back:focus-visible { outline-color: #000; }
    /* 밝은 바 위 기호는 검정, 고른 칸(블랙) 안에서는 흰색 */
    .dng-dock .dng-legend__mark.dng-spot--drone, .dng-dock .dng-legend__mark.dng-spot--army, .dng-dock .dng-legend__mark.dng-spot--project { background: #000; }
    .dng-dock .dng-legend__mark.dng-spot--vehicle, .dng-dock .dng-legend__mark.dng-spot--mobile { border-color: #000; }
    .dng-dock .dng-legend__mark.dng-spot--field { background: linear-gradient(#000, #000) center / 100% 2px no-repeat, linear-gradient(#000, #000) center / 2px 100% no-repeat; }
    .dng-dock .dng-legend li.is-on .dng-legend__mark.dng-spot--drone, .dng-dock .dng-legend li.is-on .dng-legend__mark.dng-spot--army, .dng-dock .dng-legend li.is-on .dng-legend__mark.dng-spot--project { background: #fff; }
    .dng-dock .dng-legend li.is-on .dng-legend__mark.dng-spot--vehicle, .dng-dock .dng-legend li.is-on .dng-legend__mark.dng-spot--mobile { border-color: #fff; }
    .dng-dock .dng-legend li.is-on .dng-legend__mark.dng-spot--field { background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 100% no-repeat; }
}

/* 상세 패널: 데스크톱은 거점 옆, 모바일은 하단 시트 */
.dng-panel { position: absolute; top: calc(148 * var(--u)); right: calc(40 * var(--u)); z-index: 4; box-sizing: border-box; width: calc(320 * var(--u)); max-height: calc(100% - 228 * var(--u)); padding: calc(32 * var(--u)); border: 1px solid rgba(255, 255, 255, .2); border-radius: calc(4 * var(--u)); background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow: auto; animation: dng-panel-in .35s ease; }
@keyframes dng-panel-in {
    from { opacity: 0; transform: translateX(calc(12 * var(--u))); }
    to { opacity: 1; transform: none; }
}
.dng-panel__close { position: absolute; top: calc(19 * var(--u)); right: calc(19 * var(--u));    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: calc(24 * var(--u)); line-height: 1; transition: background-color .2s; }
.dng-panel__close:hover { background: rgba(255, 255, 255, .12); }
.dng-panel__name { margin: 0 calc(36 * var(--u)) 0 0; font-size: calc(26 * var(--u));    font-weight: 700; line-height: 1.25; }
.dng-panel__app { margin: calc(8 * var(--u)) calc(36 * var(--u)) 0 0; font-size: calc(14 * var(--u)); line-height: 1.5; color: rgba(255, 255, 255, .7); }

/* 수치는 2열, Flights는 전체 폭 사용 */

/* 수치 영역의 열 너비 */
/* 수치 카드의 배경과 간격 */
.dng-panel__stats { display: grid; grid-template-columns: repeat(2, calc(176 * var(--u)));    gap: calc(6 * var(--u)); margin: calc(64 * var(--u)) 0 0; padding: 0; }
.dng-panel__stats > div { display: flex; flex-direction: column-reverse; margin: 0; padding: calc(26 * var(--u)) calc(16 * var(--u));    border-radius: 4px; background: rgba(255, 255, 255, .06); }
.dng-panel__stats > div[data-optional] { grid-column: 1 / -1; }
.dng-panel__stats dt { font-size: calc(13 * var(--u)); font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .6); white-space: nowrap; }   /* 라벨 한 줄 유지 */
.dng-panel__stats dd { margin: 0 0 calc(4 * var(--u)); font-size: calc(36 * var(--u));    font-weight: 700; line-height: 1.2; }
/* 선택한 거점의 투영 좌표에 상세 패널 고정 */
/* 상세 패널 진입·종료 전환 */
.dng-panel.is-pinned { right: auto; width: calc(424 * var(--u));    animation: dng-panel-pop .55s cubic-bezier(.22, 1, .36, 1) both; }
/* 데스크톱 팝업의 반투명 배경 */
.dng-panel.is-pinned,
.dng-group { border-color: rgba(255, 255, 255, .14); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 60%), rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .35); }
.dng-panel.is-pinned.is-slow { animation-duration: 1.1s; animation-delay: .2s; }   /* 거점이 하나뿐인 권역(Pacific)에서 확대 뒤 자동으로 열 때는 천천히 */
.dng-panel.is-pinned.is-closing { animation: dng-panel-out .22s ease-in both; }
@keyframes dng-panel-pop {
    from { opacity: 0; transform: translateX(calc(-14 * var(--u))) scale(.98); }
    to { opacity: 1; transform: none; }
}
@keyframes dng-panel-out {
    to { opacity: 0; transform: translateX(calc(-8 * var(--u))) scale(.99); }
}


/* **************************************** *
 * SECTION TEXT
 * **************************************** */
.main-data__inner { position: relative; z-index: 2; height: 100%; padding: 0 calc(40 * var(--u)); pointer-events: none; }
.main-data__inner a,
.main-data__inner button { pointer-events: auto; }

/* 제목과 설명 */
.main-data__head { position: absolute; top: calc(80 * var(--u)); left: calc(40 * var(--u)); max-width: calc(960 * var(--u)); }
.main-data__title { margin: 0; font-size: calc(48 * var(--u)); font-weight: 700; line-height: 1.3; }
@media (min-width: 861px) { .main-data__title, .main-data__sub { white-space: nowrap; } }
.main-data__sub { margin: calc(20 * var(--u)) 0 0; font-size: calc(20 * var(--u)); font-weight: 500; line-height: 1.6; }
.main-data__btn { display: inline-flex; margin-top: calc(32 * var(--u)); padding: calc(12 * var(--u)) calc(40 * var(--u)) calc(14 * var(--u)); border: 2px solid #fff; border-radius: 2px; color: #fff; font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.6; text-decoration: none; }

/* 3대 KPI : 값·라벨은 script.js 가 data/network.json 으로 채움 */
.main-data__kpis { position: absolute; top: calc(581 * var(--u)); left: calc(35 * var(--u)); width: calc(433 * var(--u)); }
.main-data__kpi { display: flex; flex-direction: column-reverse; padding: calc(20 * var(--u)) 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }   /* KPI 라벨을 수치 위로 표시 */
.main-data__kpi:last-child { border-bottom: 0; }
.main-data__kpi-value { display: flex; align-items: flex-end; gap: calc(4 * var(--u)); font-size: calc(48 * var(--u)); font-weight: 700; line-height: 1.3; }
/* 수치에 뒤따르는 단위 */
.main-data__kpi-unit { padding-bottom: calc(3 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 500; line-height: 1.6; }
.main-data__kpi-label { display: block; font-size: calc(18 * var(--u)); font-weight: 500; line-height: 1.6; color: #fff; }


/* **************************************** *
 * RESPONSIVE
 * **************************************** */
@media (max-width: 1900px) {
    .rgs, .main-data { --u: calc(100vw / 1900); }
}

/* 모바일 비례 단위는 390px 기준이며 최대 1.4px로 제한 */
@media (max-width: 860px) {
    .rgs, .main-data { --u: min(calc(100vw / 390), 1.4px); }
    .main-data { height: auto; }
    /* 텍스트 아래 지구본 영역 확보 */
    .main-data__inner { height: auto; padding: calc(56 * var(--u)) calc(20 * var(--u)) calc(500 * var(--u)); }
    .main-data__head,
    .main-data__kpis { position: static; width: auto; max-width: none; }
    .main-data__title { font-size: calc(28 * var(--u)); }
    .main-data__sub { font-size: calc(15 * var(--u)); }
    .main-data__btn { font-size: calc(15 * var(--u)); padding: calc(10 * var(--u)) calc(24 * var(--u)); }
    .main-data__kpis { margin-top: calc(32 * var(--u)); }
    .main-data__kpi-value { font-size: calc(32 * var(--u)); }
    .main-data__kpi-unit { padding-bottom: calc(2 * var(--u)); font-size: calc(14 * var(--u)); }
    .main-data__kpi-label { font-size: calc(15 * var(--u)); }
    .jt-region-globe { top: auto; height: calc(480 * var(--u)); }
    .jt-region-globe__anchor { top: calc(70 * var(--u)); right: auto; left: 50%; width: calc(370 * var(--u)); transform: translateX(-50%); }
    /* U.S. 오른쪽 고정 버튼(지구 뒤편일 때) */
    .dng-cluster.is-pin-right { top: calc(150 * var(--u)); right: calc(12 * var(--u)); padding-right: calc(38 * var(--u)); }
    .dng-cluster__arrow { right: calc(14 * var(--u)); }


    /* 모바일 Global 버튼은 목록 시트 제목 줄에서 표시 */
    .dng-back { display: none !important; }


    .dng-legend { right: auto; left: calc(20 * var(--u)); bottom: calc(16 * var(--u)); gap: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(11 * var(--u)); }
    .dng-cluster { gap: calc(7 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)); }
    .dng-cluster::before { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
    /* 모바일 지도는 지역명만, 보조 지표는 하단 시트에 표시 */
    .dng-spot__label small { display: none; }
    /* 모바일 마커의 크기 범위 제한 */
    .dng-spot:not(.is-solo) { --dot: clamp(6px, calc(var(--size) * .7), 9px); --gap: calc(5 * var(--u)); }
    .dng-spot--field:not(.is-solo),
    .dng-spot--vehicle:not(.is-solo) { --dot: 10px; }
    .dng-cluster__name { font-size: calc(12 * var(--u)); }
    .dng-cluster__sites { font-size: calc(10 * var(--u)); }

    /* 바텀 시트 : 화면 아래 고정, is-open 에서 올라옴. 닫을 때는 is-open 제거 뒤 전환이 끝나고 hidden */
    /* 화면 아래 40% 안쪽으로 낮게 : 위쪽에 고른 거점이 보이게 (권역 확대 위치는 JSON zoom.mobile 로 위로 올림) */
    .dng-panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 50; width: auto; max-height: 46vh; padding: calc(26 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u) + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; transform: translateY(100%); transition: transform .35s ease; animation: none; }
    .dng-panel::before { content: ''; position: absolute; top: calc(10 * var(--u)); left: 50%; width: calc(36 * var(--u)); height: calc(4 * var(--u)); margin-left: calc(-18 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .3); }
    .dng-panel.is-open { transform: translateY(0); }
    .dng-panel__name { font-size: calc(20 * var(--u)); }
    .dng-panel__app { margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); }
    .dng-panel__stats { gap: calc(14 * var(--u)) 0; margin-top: calc(16 * var(--u)); padding-top: calc(16 * var(--u)); }
    .dng-panel__stats > div:nth-child(1) { padding-right: calc(16 * var(--u)); }
    .dng-panel__stats > div:nth-child(2) { padding-left: calc(16 * var(--u)); }
    .dng-panel__stats > div[data-optional] { padding-top: calc(14 * var(--u)); }
    .dng-panel__stats dd { font-size: calc(24 * var(--u)); }
    .dng-panel__stats dt { font-size: calc(12 * var(--u)); }
}

/* 모바일 목록 시트: 유형 필터와 거점 목록, 확장 시 목록 스크롤 */
.dng-sheet { display: none; }
@media (max-width: 860px) {
    .jt-region-globe .dng-legend { display: none; }
    /* 시트 하단 여백 */
    .dng-sheet { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; flex-direction: column; box-sizing: border-box; height: calc(266 * var(--u) + env(safe-area-inset-bottom)); max-height: calc(46vh + env(safe-area-inset-bottom)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .15); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; background: #1a1a1b; color: #fff; transition: height .35s cubic-bezier(.22, 1, .36, 1), transform .3s ease; }
    .dng-sheet[hidden] { display: none; }
    /* 목록은 시트 안에서 스크롤하고 끝에 닿아도 페이지로 넘기지 않음. 시트의 나머지 부분(손잡이·제목·칩)은 페이지 스크롤을 막지 않음 */
    .dng-sheet__list { touch-action: pan-y; overscroll-behavior: contain; }
    /* 손잡이·제목 줄은 세로 끌기로 펼침·접힘 (script.js). 이 두 요소에서만 페이지 스크롤을 막음 */
    .dng-sheet__handle,
    .dng-sheet__head { touch-action: none; }
    .dng-sheet__chips { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }   /* 가로는 칩 줄, 세로는 페이지 스크롤 */
    /* 펼친 상태에서는 시트가 뒤 페이지 스크롤을 막음 (목록만 안에서 스크롤, 칩 줄은 가로만). 접힌 상태는 위 규칙대로 페이지 스크롤 */
    .dng-sheet.is-expanded,
    .dng-sheet.is-detail { touch-action: none; }
    .dng-sheet.is-expanded .dng-sheet__chips { touch-action: pan-x; }
    /* 접힌 시트 높이는 화면의 46% 이하. 하단 안전 영역을 높이에 포함 */
    .dng-sheet.is-expanded { height: 75vh; max-height: 75vh; }
    .dng-sheet.is-dragging { transition: none; }   /* 손가락을 따라가는 동안은 전환 효과 없음 (script.js 끌기) */
    .dng-sheet.is-away { transform: translateY(110%); }
    .dng-sheet button { margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .dng-sheet button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    /* 탭 영역은 22u + 2px(최소 24px), 차지하는 자리는 22u 그대로 (아래 2px 를 음수 여백으로 상쇄). 막대 위치는 그대로.
       선택자는 아래 .dng-sheet button { margin: 0 } 보다 우선하도록 button 을 붙임 */
    .dng-sheet button.dng-sheet__handle { position: relative; z-index: 1; flex: none; display: block; width: 100%; box-sizing: border-box; height: calc(22 * var(--u) + 16px); margin: 0 0 -16px; padding: 0 0 16px; }
    /* 탭 영역이 제목 줄 위 16px 까지 겹침(제목 줄 탭도 같은 동작). Global 버튼만 손잡이 위로 */
    .dng-sheet button.dng-sheet__back { position: relative; z-index: 2; }
    /* Global 버튼·칩의 탭 영역을 보이는 모양 밖으로 넓힘 (세로 ±8px, 칩은 가로 ±3px 로 이웃과 겹치지 않게) */
    .dng-sheet button.dng-sheet__back::after,
    .dng-sheet button.dng-sheet__chip::after { content: ''; position: absolute; inset: -8px -8px -2px; }   /* 아래쪽은 칩 줄과 겹치지 않게 짧게 */
    .dng-sheet button.dng-sheet__chip { position: relative; }
    .dng-sheet button.dng-sheet__chip::after { inset: -6px -3px -8px; }
    /* 펼칠 것이 없는 권역 : 막대를 숨김(자리는 그대로), 펼침 동작 없음 (script.js is-fit) */
    .dng-sheet.is-fit .dng-sheet__handle::before { display: none; }
    .dng-sheet.is-fit .dng-sheet__handle,
    .dng-sheet.is-fit .dng-sheet__head { cursor: default; }
    .dng-sheet__handle::before { content: ''; display: block; width: calc(36 * var(--u)); height: calc(4 * var(--u)); margin: 0 auto; border-radius: 999px; background: rgba(255, 255, 255, .3); }
    .dng-sheet__head { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(20 * var(--u)); cursor: pointer; }
    .dng-sheet__back { flex: none; display: inline-grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin: 0 calc(2 * var(--u)) 0 calc(-6 * var(--u)); padding: 0; border: 0; border-radius: 2px; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .dng-sheet__back .dng-back__icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
    .dng-sheet__back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .dng-sheet__title { font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: .04em; }
    .dng-sheet__count { font-size: calc(12 * var(--u)); color: rgba(255, 255, 255, .55); }
    .dng-sheet__chips { flex: none; display: flex; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); overflow-x: auto; scrollbar-width: none; }
    .dng-sheet__chips::-webkit-scrollbar { display: none; }
    .dng-sheet button.dng-sheet__chip { flex: none; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: calc(13 * var(--u)); font-weight: 600; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
    .dng-sheet__chip small { font-size: calc(11 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, .55); }
    .dng-sheet button.dng-sheet__chip.is-on { border-color: #fff; background: #fff; color: #000; }
    .dng-sheet__chip.is-on small { color: rgba(0, 0, 0, .6); }
    .dng-sheet__chip.is-on .dng-legend__mark { background: #000; border-color: #000; box-shadow: none; }
    /* 빈 도형(마름모·점선 고리)은 켜져도 속을 비우고, 십자는 선 색만 뒤집음 */
    .dng-sheet__chip.is-on .dng-legend__mark.dng-spot--vehicle,
    .dng-sheet__chip.is-on .dng-legend__mark.dng-spot--mobile { background: none; }
    .dng-sheet__chip.is-on .dng-legend__mark.dng-spot--field { background: linear-gradient(#000, #000) center / 100% 2px no-repeat, linear-gradient(#000, #000) center / 2px 100% no-repeat; }
    /* 시트의 유형 기호 크기 정렬 */
    .dng-sheet__chip .dng-legend__mark.dng-spot--vehicle,
    .dng-sheet__list .dng-legend__mark.dng-spot--vehicle { transform: rotate(var(--rot)) scale(.72); }
    .dng-sheet__list { flex: 1; min-height: 0; margin: 0; padding: 2px 0 0; background: #000;   /* 시트 목록 영역의 배경 */ overflow-y: auto; overscroll-behavior: contain; list-style: none; }
    /* 목록 행의 배경과 간격 */
    .dng-sheet__list li { margin-bottom: 2px; border-radius: 2px; background: rgba(255, 255, 255, .06); }
    .dng-sheet__list li[hidden] { display: none; }
    .dng-sheet__list li button { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; min-height: 48px; padding: calc(10 * var(--u)) calc(20 * var(--u)); }   /* 행 안 좌우 20 : 글자가 제목 줄과 같은 선에서 시작 */
    .dng-sheet__list .dng-legend__mark { flex: none; }
    .dng-sheet__name { flex: 1; min-width: 0; }
    .dng-sheet__name b { display: block; font-size: calc(15 * var(--u)); font-weight: 700; }
    .dng-sheet__name small { display: block; overflow: hidden; margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); color: rgba(255, 255, 255, .55); white-space: nowrap; text-overflow: ellipsis; }
    .dng-sheet__meta { flex: none; text-align: right; }
    .dng-sheet__meta b { display: block; font-size: calc(13 * var(--u)); font-weight: 700; }
    .dng-sheet__meta small { display: block; font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, .55); }
    .dng-sheet__list li.is-selected { background: rgba(255, 255, 255, .14); }

    /* 상세 모드: 목록 대신 거점 정보를 표시하고 내용에 맞춰 높이 조절 */
    .dng-sheet__detail { display: none; }
    .dng-sheet.is-detail { height: auto; }
    .dng-sheet.is-detail .dng-sheet__head,
    .dng-sheet.is-detail .dng-sheet__chips,
    .dng-sheet.is-detail .dng-sheet__list { display: none; }
    .dng-sheet.is-detail .dng-sheet__detail { display: block; padding: 0 calc(20 * var(--u)) calc(22 * var(--u)); }
    .dng-sheet.is-detail-in .dng-sheet__detail { animation: dng-sheet-detail .4s cubic-bezier(.22, 1, .36, 1); }
    @keyframes dng-sheet-detail {
        from { opacity: 0; transform: translateY(calc(10 * var(--u))); }
        to { opacity: 1; transform: none; }
    }
    /* 상세 제목과 목록 복귀 버튼 */
    .dng-sheet__bar { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); }
    /* 닫기 아이콘은 두 선으로 구성 */
    /* 탭 영역 48px, 보이는 자리는 전과 같음(음수 여백) */
    .dng-sheet button.dng-sheet__close { position: relative; flex: none; width: 48px; height: 48px; margin: -6px -14px -6px 0; border-radius: 50%; font-size: 0; }
    .dng-sheet button.dng-sheet__close::before,
    .dng-sheet button.dng-sheet__close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
    .dng-sheet button.dng-sheet__close::after { transform: rotate(-45deg); }
    .dng-sheet button.dng-sheet__close:active { background: rgba(255, 255, 255, .12); }
    .dng-sheet__dname { min-width: 0; margin: 0; font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.25; }
    .dng-sheet__dapp { margin: calc(4 * var(--u)) 0 0; font-size: calc(12 * var(--u)); line-height: 1.5; color: rgba(255, 255, 255, .7); }
    /* 상세 수치 영역의 간격 */
    /* 모바일 수치 카드 */
    .dng-sheet__stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(6 * var(--u)); margin: calc(44 * var(--u)) 0 0; padding: 0; }
    .dng-sheet__stats > div { display: flex; flex-direction: column-reverse; padding: calc(22 * var(--u)) calc(16 * var(--u)); border-radius: 4px; background: rgba(255, 255, 255, .06); }
    .dng-sheet__stats > div[hidden] { display: none; }
    .dng-sheet__stats > div:nth-child(3) { grid-column: 1 / -1; }
    .dng-sheet__stats dt { font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, .6); white-space: nowrap; }
    .dng-sheet__stats dd { margin: 0 0 calc(2 * var(--u)); font-size: calc(32 * var(--u));    font-weight: 700; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
    .dng-panel,
    .dng-panel.is-pinned,
    .dng-panel.is-pinned.is-closing { animation: none; transition: none; }
    .dng-cluster,
    .dng-spot__dot,
    .dng-spot__label,
    .dng-back { transition: none; }
    .dng-spot.is-solo .dng-spot__dot::before { animation: none; opacity: .5; }}

/* **************************************** *
 * RESPONSIVE TYPOGRAPHY
 * **************************************** */
@media (min-width: 861px) {
    .dng-panel__name { line-height: 1.4; }
    .dng-panel__app { font-weight: 500; line-height: 1.3; }
    .dng-panel__stats dd { font-size: calc(38 * var(--u)); line-height: 1.4; }
    .dng-panel__stats dt { font-size: calc(14 * var(--u)); line-height: 1.3; }
    .dng-cluster__name { font-size: calc(16 * var(--u)); line-height: 1.5; }
    .dng-cluster__sites { line-height: 1.5; }
    .dng-spot__label { font-size: calc(14 * var(--u)); font-weight: 700; }
    .dng-spot__label small { font-size: calc(12 * var(--u)); }
    .dng-dock .dng-legend { font-weight: 500; }
    .dng-group__list b { font-weight: 700; }
    .dng-group__list small { font-weight: 500; }
}
@media (max-width: 860px) {
    .dng-cluster__sites { font-size: calc(11 * var(--u)); }
    .dng-spot__label { font-weight: 700; }
    .dng-sheet__title { font-size: calc(18 * var(--u)); }
    .dng-sheet__name b { font-size: calc(16 * var(--u)); }
    .dng-sheet__name small,
    .dng-sheet__dapp,
    .dng-sheet__stats dt { font-weight: 500; }
    .dng-sheet button.dng-sheet__chip { font-weight: 700; }
}
/* 데스크톱 닫기 버튼을 제목 첫 줄에 정렬 */

@media (min-width: 861px) { .dng-panel.is-pinned .dng-panel__close { top: calc(32 * var(--u) + 26 * 1.4 * var(--u) / 2 - 16px); right: calc(32 * var(--u) - 11.5px); } }