/* public/css/common.css */

:root{
  /* --------------------------------------------------
   * Layout / sizing
   * -------------------------------------------------- */
  --leftbar-w: 40px;
  --topbar-h: 30px;
  --ui-gap: 10px;

  --tb-z: 1150;
  /* 상단 툴바만 셸보다 위에 둔다. **툴바가 자기 스택 컨텍스트를 만들기 때문이다** —
     `#topToolbar` 는 `#appRoot` 의 flex 아이템이라 `z-index` 가 먹고, 그러면 그 안의
     드롭다운(`.top-toolbar-user-menu`: 설정·사용자)은 아무리 높은 값을 줘도 **툴바 전체의
     값으로 취급**된다. 종전 1150 은 좌측 셸(`project-browser.css:12` = 1180)보다 낮아
     드롭다운이 셸 뒤로 숨었다. 루트 메뉴는 별도 레이어(`--top-menu-z`)에 그려져 이 함정을
     피하므로 **설정·사용자 메뉴만** 증상이 났다.
     `.pb-dock-zone`(1300)·메뉴 창(2000+)보다는 아래로 둬 종전 서열을 유지한다.
     `--tb-z` 는 하단 툴바가 함께 쓰므로 건드리지 않는다(그쪽엔 이 문제가 없다). */
  --tb-top-z: 1200;
  --top-menu-z: 1350;

  --tb-pad-x: 10px;
  --tb-pad-y: 2px;
  --tb-ctl-h: 30px;
  --tb-font: 13px;
  --tb-ctl-pad-x: 10px;
  --tb-radius: 6px;

  /* --------------------------------------------------
   * Typography
   * -------------------------------------------------- */
  --font-ui: "Segoe UI", system-ui, "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;

  /* --------------------------------------------------
   * Dark theme surfaces
   * -------------------------------------------------- */
  --color-bg-app: #0d0f13;
  --color-surface-toolbar: rgba(19, 21, 28, 0.96);
  --color-surface-toolbar-strong: rgba(26, 28, 35, 0.98);
  --color-surface-panel: rgba(26, 28, 35, 0.97);
  --color-surface-menu: rgba(19, 21, 28, 0.985);
  --color-surface-dialog: rgba(30, 33, 40, 0.99);
  --color-surface-elevated: rgba(255,255,255,0.03);
  --color-surface-3: rgba(21, 23, 30, 0.96);

  /* Shared overlay states */
  --color-hover: rgba(255,255,255,0.06);
  --color-active: rgba(10,79,128,0.24);
  --color-selected: rgba(10,143,207,0.22);

  /* --------------------------------------------------
   * Text
   * -------------------------------------------------- */
  --color-text: #d7dbe4;
  --color-text-muted: rgba(199,205,218,0.74);
  --color-text-dim: rgba(143,150,168,0.82);
  --color-text-inverse: #0d0f13;

  /* --------------------------------------------------
   * Borders / dividers
   * -------------------------------------------------- */
  --color-border: rgba(46,51,64,0.96);
  --color-border-strong: rgba(61,67,82,0.98);
  --color-divider: rgba(37,42,53,0.92);
  --color-focus-ring: rgba(0,170,255,0.34);
  --color-backdrop: rgba(0,0,0,0.55);

  /* --------------------------------------------------
   * Accent / status
   * -------------------------------------------------- */
  --color-accent: #0a8fcf;
  --color-accent-hover: #00aaff;
  --color-accent-soft: rgba(10,143,207,0.18);
  --color-active-border: #00aaff;
  --color-toolbar-accent: #0a4f80;
  --color-toolbar-accent-hover: #0a8fcf;
  --color-toolbar-text-muted: #c8cad5;
  --color-disabled-strong: #3a3f50;
  --color-warning: #ffc919;
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239,68,68,0.12);
  --color-danger-border: rgba(239,68,68,0.28);
  --color-danger-text: #fecaca;
  --color-success: #10b981;
  --color-success-soft: rgba(16,185,129,0.12);
  --color-success-border: rgba(16,185,129,0.28);
  --color-success-text: #b7f7db;
  --color-info-soft: rgba(10,143,207,0.16);
  --color-info-border: rgba(10,143,207,0.32);
  --color-info-text: #b7e9ff;
  --color-walkthrough-ring: rgba(0,170,255,0.55);
  --color-walkthrough-bg: rgba(0,170,255,0.14);

  /* --------------------------------------------------
   * Viewer interaction colors
   * -------------------------------------------------- */
  --viewer-selection-overlay: #ffffff;
  --viewer-selection-outline: #00aaff;
  --viewer-selection-glow-alpha: 0.58;
  --viewer-measure-point: #00aaff;
  --viewer-measure-point-outline: #0d0f13;
  --viewer-measure-line: #0a8fcf;
  --viewer-measure-fill: rgba(10,143,207,0.22);
  --viewer-label-fill: #ffffff;
  --viewer-label-outline: #0d0f13;
  --viewer-label-bg: rgba(0,0,0,0.55);

  /* --------------------------------------------------
   * Form controls
   * -------------------------------------------------- */
  --color-input-bg: rgba(255,255,255,0.03);
  --color-input-bg-hover: rgba(255,255,255,0.05);
  --color-input-border: rgba(46,51,64,0.96);
  --color-input-text: #d7dbe4;
  --color-input-placeholder: rgba(143,150,168,0.82);

  /* --------------------------------------------------
   * Panel header surface (Nova "panel-soft" equivalent)
   * -------------------------------------------------- */
  --color-panel-header-bg:    rgba(21, 23, 30, 0.98);
  --color-panel-header-title: #00aaff;
  --color-panel-label-text:   rgba(143, 150, 168, 0.82);
  --color-scrollbar-thumb:    rgba(37, 42, 53, 0.96);

  /* --------------------------------------------------
   * Button compatibility tokens
   * -------------------------------------------------- */
  --ui-btn-text: var(--color-text);
  --ui-btn-border: var(--color-border);
  --ui-btn-bg: transparent;
  --ui-btn-hover-bg: var(--color-hover);
  --ui-btn-active-bg: var(--color-accent);
  --ui-btn-active-border: var(--color-accent);
  --ui-btn-active-color: #ffffff;
  --ui-btn-accent-bg: var(--color-toolbar-accent);
  --ui-btn-accent-border: var(--color-toolbar-accent-hover);
  --ui-btn-accent-text: #ffffff;

  /* --------------------------------------------------
   * Toolbar compatibility tokens
   * -------------------------------------------------- */
  --ui-bar-bg: var(--color-surface-toolbar);
  --ui-bar-bg-strong: var(--color-surface-toolbar-strong);
  --ui-bar-border: var(--color-border);
  --ui-bar-shadow: 0 10px 24px rgba(0,0,0,0.32);

  /* --------------------------------------------------
   * Menu compatibility tokens
   * -------------------------------------------------- */
  --ui-menu-bg: var(--color-surface-menu);
  --ui-menu-border: var(--color-border);
  --ui-menu-hover: var(--color-toolbar-accent);

  /* --------------------------------------------------
   * Radius
   * -------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* --------------------------------------------------
   * Shadow
   * -------------------------------------------------- */
  --shadow-soft: 0 8px 18px rgba(0,0,0,0.26);
  --shadow-panel: 0 18px 36px rgba(0,0,0,0.34);
  --shadow-menu: 0 20px 42px rgba(0,0,0,0.38);
  --shadow-dialog: 0 24px 48px rgba(0,0,0,0.42);

  /* --------------------------------------------------
   * Spacing
   * -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;

  /* --------------------------------------------------
   * Legacy color tokens for login.css compatibility
   * -------------------------------------------------- */
  --white: #ffffff;
  --gray: #efefef;
  --gray-2: #7a7a7a;

  --primary-color: #0a8fcf;
  --secondary-color: #0a4f80;

  --facebook-color: #4267B2;
  --google-color: #DB4437;
  --twitter-color: #1DA1F2;
  --insta-color: #E1306C;
}

:root[data-theme="light"]{
  --color-bg-app: #f0f2f5;
  --color-surface-toolbar: rgba(255, 255, 255, 0.98);
  --color-surface-toolbar-strong: rgba(245, 245, 247, 0.98);
  --color-surface-panel: rgba(255, 255, 255, 0.99);
  --color-surface-menu: rgba(255, 255, 255, 0.99);
  --color-surface-dialog: rgba(255, 255, 255, 0.995);
  --color-surface-elevated: rgba(0, 102, 204, 0.04);
  --color-surface-3: rgba(245, 245, 247, 0.98);

  --color-hover: rgba(0,102,204,0.08);
  --color-active: rgba(0,102,204,0.14);
  --color-selected: rgba(45,127,224,0.16);

  --color-text: #222222;
  --color-text-muted: rgba(102,112,133,0.94);
  --color-text-dim: rgba(153,153,153,0.94);
  --color-text-inverse: #ffffff;

  --color-border: rgba(224,224,232,0.98);
  --color-border-strong: rgba(208,213,221,0.98);
  --color-divider: rgba(224,224,232,0.92);
  --color-focus-ring: rgba(45,127,224,0.24);
  --color-backdrop: rgba(17,24,39,0.36);

  --color-accent: #0066cc;
  --color-accent-hover: #0055cc;
  --color-accent-soft: rgba(0,102,204,0.10);
  --color-active-border: #2d7fe0;
  --color-toolbar-accent: #0066cc;
  --color-toolbar-accent-hover: #2d7fe0;
  --color-toolbar-text-muted: #667085;
  --color-disabled-strong: #b7bdc9;
  --color-danger: #dc2626;
  --color-danger-soft: rgba(220,38,38,0.10);
  --color-danger-border: rgba(220,38,38,0.22);
  --color-danger-text: #b42318;
  --color-walkthrough-ring: rgba(45,127,224,0.42);
  --color-walkthrough-bg: rgba(45,127,224,0.12);

  --viewer-selection-overlay: #dbeafe;
  --viewer-selection-outline: #0066cc;
  --viewer-selection-glow-alpha: 0.42;
  --viewer-measure-point: #0066cc;
  --viewer-measure-point-outline: #ffffff;
  --viewer-measure-line: #2d7fe0;
  --viewer-measure-fill: rgba(45,127,224,0.18);
  --viewer-label-fill: #ffffff;
  --viewer-label-outline: #0d0f13;
  --viewer-label-bg: rgba(17,24,39,0.72);

  --color-input-bg: rgba(245,245,247,0.96);
  --color-input-bg-hover: rgba(238,240,245,0.98);
  --color-input-border: rgba(224,224,232,0.98);
  --color-input-text: #222222;
  --color-input-placeholder: rgba(102,112,133,0.72);

  /* Panel header surface */
  --color-panel-header-bg:    rgba(238, 240, 245, 0.99);
  --color-panel-header-title: #0055cc;
  --color-panel-label-text:   rgba(102, 112, 133, 0.94);
  --color-scrollbar-thumb:    rgba(208, 213, 221, 0.96);

  --ui-btn-text: var(--color-text);
  --ui-btn-border: var(--color-border);
  --ui-btn-bg: rgba(255,255,255,0.96);
  --ui-btn-hover-bg: rgba(0,102,204,0.08);
  --ui-btn-active-bg: var(--color-toolbar-accent);
  --ui-btn-active-border: var(--color-toolbar-accent);
  --ui-btn-active-color: #ffffff;
  --ui-btn-accent-bg: var(--color-toolbar-accent);
  --ui-btn-accent-border: var(--color-toolbar-accent-hover);
  --ui-btn-accent-text: #ffffff;

  --ui-bar-bg: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(245,245,247,0.98) 100%);
  --ui-bar-bg-strong: rgba(245, 245, 247, 0.98);
  --ui-bar-border: rgba(224,224,232,0.96);
  --ui-bar-shadow: 0 10px 24px rgba(17,24,39,0.08);

  --ui-menu-bg: rgba(255,255,255,0.99);
  --ui-menu-border: rgba(224,224,232,0.96);
  --ui-menu-hover: var(--color-toolbar-accent);

  --shadow-soft: 0 6px 14px rgba(17,24,39,0.08);
  --shadow-panel: 0 14px 30px rgba(17,24,39,0.10);
  --shadow-menu: 0 16px 34px rgba(17,24,39,0.12);
  --shadow-dialog: 0 18px 42px rgba(17,24,39,0.14);
}

/* --------------------------------------------------
 * Responsive contract (테마 독립 — 라이트/다크 공통)
 *
 * breakpoint 값의 단일 출처는 아래 --bp-* 다. 단 CSS는 @media 조건에서
 * var()를 읽지 못한다 — 읽으려 하면 조건 전체가 무효가 되어 블록이
 * 통째로 죽는다(조용한 실패). 그래서 규약을 이렇게 고정한다:
 *   · @media 에는 리터럴을 쓰고 바로 옆에 계급 주석을 단다.
 *   · JS는 getComputedStyle(document.documentElement)로 --bp-* 를 읽어
 *     matchMedia 를 만든다. JS에 숫자를 다시 적지 않는다.
 *
 *   compact  0    – 599    폰 세로              @media (max-width: 599.98px)
 *   narrow   600  – 899    폰 가로 / 소형 태블릿  @media (max-width: 899.98px)
 *   regular  900  – 1279   태블릿 가로 / 노트북   @media (max-width: 1279.98px)
 *   wide     1280 –        데스크톱             (기본 — 쿼리 없음)
 *   short    height ≤ 599  세로 부족(폰 가로) — 폭 계급과 직교
 *
 * .98 을 쓰는 이유: max-width:599px 과 min-width:600px 사이에는 분수 배율
 * (브라우저 줌·DPR)에서 아무 규칙도 걸리지 않는 틈이 생긴다.
 *
 * 기존 값 425/720/780/980/1100/1180 은 이 slice에서 동결한다. 이동 대상과
 * 목적지는 DECISIONS.md 2026-08-20 항목의 매핑표를 따른다.
 * -------------------------------------------------- */
:root{
  --bp-compact: 600px;
  --bp-narrow:  900px;
  --bp-regular: 1280px;
  --bp-short:   600px;

  /* safe-area — HTML meta에 viewport-fit=cover 가 있을 때만 0이 아니다.
     env() 는 이 4개 안에서만 읽는다(다른 파일에서 직접 쓰지 않는다). 이유가 둘:
       ① 노치 없는 기기·DevTools에서 이 4개만 덮어쓰면 인셋 레이아웃을 그대로
          시뮬레이션할 수 있다 — env() 를 각 규칙에 흩뿌리면 덮어쓸 지점이 사라진다.
          (Chrome DevTools 기기 에뮬레이션은 env(safe-area-inset-*) 를 주입하지 않는다.)
       ② env() 미지원 엔진에서 바로 위 0px 선언이 살아남아 calc() 가 무효화되지 않는다
          (login.css 의 vh → svh 이중 선언과 같은 관용구). */
  --safe-t: 0px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: 0px;
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: 0px;
  --safe-l: env(safe-area-inset-left, 0px);

  /* hit target — WCAG 2.2 AA(2.5.8) 24px 바닥, 터치 가능 기기는 44px.
     **소비 방법: 크기를 이 토큰으로 적는다**(`min-width: var(--hit-target)`).
     각 파일에서 `@media` 로 크기를 덮으려 하면 같은 특이도라 **뒤에 오는 기본 규칙이나
     나중에 로드되는 파일에 조용히 진다** — 2026-08-21 에 실제로 그렇게 죽은 규칙이 나왔다.
     토큰은 그 순서 문제를 통과한다(값이 바뀌는 것이지 규칙이 겨루는 것이 아니다). */
  --hit-min:    24px;
  --hit-touch:  44px;
  --hit-target: var(--hit-min);

  /* overlay inset — 떠 있는 오버레이와 화면 가장자리 사이 거리.
     소비 규칙이 둘로 갈린다(인셋 중복 가산 방지):
       · #appRoot 안쪽의 absolute 오버레이(viewcube 등) → --overlay-inset
         (#appRoot 가 이미 인셋만큼 안으로 들어와 있다)
       · position:fixed 로 뷰포트에 직접 붙는 오버레이 → --overlay-inset-*
     이번 slice에는 소비처가 없다. */
  --overlay-inset:   10px;
  --overlay-inset-t: calc(var(--overlay-inset) + var(--safe-t));
  --overlay-inset-r: calc(var(--overlay-inset) + var(--safe-r));
  --overlay-inset-b: calc(var(--overlay-inset) + var(--safe-b));
  --overlay-inset-l: calc(var(--overlay-inset) + var(--safe-l));
}

/* **`any-pointer` 를 쓴다 — `pointer` 가 아니다.**
   `pointer: coarse` 는 **주 입력**이 굵을 때만 참이라, 마우스를 주로 쓰는 **터치 노트북**에서는
   거짓이다. 그러면 화면을 손가락으로 눌러도 버튼이 24~30px 로 남는다.
   `any-pointer: coarse` 는 "굵은 입력이 **하나라도 있는가**"를 묻는다 — 터치가 가능하면 터치할 수
   있는 크기를 준다. 실패 비용이 비대칭이라 이쪽이 맞다: 너무 작으면 **못 누르고**, 너무 크면
   조금 투박할 뿐이다.
   hover 전용 UI 노출은 이 축이 아니라 `hover: none` 으로 가른다(정밀도와 hover 가능 여부는 별개다). */
@media (any-pointer: coarse){
  :root{ --hit-target: var(--hit-touch); }
}

/* --------------------------------------------------
 * App root layout
 * -------------------------------------------------- */
html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  background: var(--color-bg-app);
  color: var(--color-text);
}

#appRoot{
  width:100%;
  height:100%;
  /* padding 이 100% 를 넘기지 않게 한다. 이 저장소에는 전역 box-sizing 리셋이 없다. */
  box-sizing:border-box;
  /* viewport-fit=cover 로 셸이 노치/홈 인디케이터 아래까지 확장된다. 인셋은 여기
     한 곳에서만 먹이는데, 무엇이 따라오고 무엇이 안 따라오는지는 position 이 가른다.

       · flow(flex/블록) 자손 → 따라온다. 레이아웃이 자식을 content box 에 놓기
         때문이다. #topToolbar(toolbar-top.css:3) · #contentRow · #toolbar_bottom
         (toolbar-bottom.css:4) · #viewerHost 가 여기 속해 각자 보정이 필요 없다.
       · absolute 자손 → **자기 containing block 이 인셋 안쪽이면** 따라온다.
         viewcube(viewcube.css:29)는 #cesiumContainer → #viewerHost 체인이 이미
         인셋 안쪽이라 괜찮다. 그러나 containing block **자체가** 이 padding 을
         가진 요소면 padding box 기준이라 밀리지 않는다 — login.css 의
         .login-theme-toggle 이 그 사례로 개별 보정한다.
       · fixed 자손 → **따라오지 않는다.** DOM 조상과 무관하게 뷰포트 기준이라
         어떤 조상의 padding 도 영향을 주지 않는다. .pm-panel[data-pm-free]
         (menu-window.css:13) · .ui-overlay-backdrop(ui-primitives.css:668) 등
         8곳이 해당하고, panel-main.js:99 의 clamp 도 인셋을 포함한
         window.innerWidth/Height 를 쓴다. **이번 slice 미처리 — OPEN_ISSUES 32.**

     인셋 띠에는 body 배경(--color-bg-app)이 그대로 보인다. */
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  display:flex;
  flex-direction:column;
  min-height:0;
}

#contentRow{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  min-width:0;
}

#mainColumn{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}

#viewerHost{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  position:relative;
  overflow:hidden;
  background: var(--color-bg-app);
}

#cesiumContainer{
  position:absolute;
  inset:0;
}

/* Hide Cesium default UI we do not use */
.cesium-widget-credits,
.cesium-widget-credits a,
.cesium-widget-credits span{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

.cesium-viewer-fullscreenContainer{
  display:none !important;
}

/* --------------------------------------------------
 * Utility helpers
 * -------------------------------------------------- */
.hidden{ display:none !important; }
.small{ font-size: var(--font-size-sm); }
.muted{ color: var(--color-text-muted); }
.dim{ color: var(--color-text-dim); }

.panel-divider,
.ui-divider{
  height:1px;
  background: var(--color-divider);
  margin: var(--space-4) 0;
}

.ui-scrollbar{
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

.ui-scrollbar::-webkit-scrollbar{ width:4px; height:4px; }
.ui-scrollbar::-webkit-scrollbar-track{ background:transparent; }
.ui-scrollbar::-webkit-scrollbar-thumb{
  background: var(--color-scrollbar-thumb);
  border-radius: 2px;
}
.ui-scrollbar::-webkit-scrollbar-thumb:hover{ background: var(--color-border-strong); }

.ui-icon{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: inline-block;
  color: currentColor;
}

.ui-icon--sm{
  width: 12px;
  height: 12px;
}

.ui-icon--md{
  width: 16px;
  height: 16px;
}

.ui-splitter{
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:0;
  min-height:0;
}

.ui-splitter__line{
  position: absolute;
  background: var(--color-divider);
}

.ui-splitter__grip{
  position: absolute;
  opacity: 0;
  transition: opacity 100ms linear;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, transparent 0 18px, var(--color-text-dim) 18px 22px, transparent 22px 30px, var(--color-text-dim) 30px 34px, transparent 34px 42px, var(--color-text-dim) 42px 46px, transparent 46px 100%),
    var(--color-surface-elevated);
  box-shadow: var(--shadow-panel);
}

.ui-splitter:hover .ui-splitter__grip,
.ui-splitter:focus-visible .ui-splitter__grip{
  opacity: 1;
}

.ui-splitter--vertical{
  width: 14px;
  cursor: col-resize;
}

.ui-splitter--vertical .ui-splitter__line{
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.ui-splitter--vertical .ui-splitter__grip{
  top: 50%;
  left: 50%;
  width: 4px;
  height: 42px;
  transform: translate(-50%, -50%);
}

.ui-splitter--horizontal{
  height: 14px;
  width: 100%;
  cursor: row-resize;
}

.ui-splitter--horizontal .ui-splitter__line{
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.ui-splitter--horizontal .ui-splitter__grip{
  top: 50%;
  left: 50%;
  width: 42px;
  height: 4px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(90deg, transparent 0 18px, var(--color-text-dim) 18px 22px, transparent 22px 30px, var(--color-text-dim) 30px 34px, transparent 34px 42px),
    var(--color-surface-elevated);
}


/* Feature info panel compatibility */
#featureInfoPanel{
  display:none;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}

#featureInfoPanel.is-open{
  display:flex;
}

#featureInfoPanel .panel-header{
  flex:0 0 auto;
  padding:12px;
  border-bottom:1px solid var(--color-divider);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background: var(--color-surface-elevated);
  color: var(--color-text);
}

#featureInfoPanel .panel-body{
  flex:1 1 auto;
  overflow:auto;
  color: var(--color-text);
}