@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --c-primary:#0093b2;
  --c-primary-dark:#006f87;
  --c-primary-light:#e6f7fa;
  --c-primary-mid:#b3e4ee;
  --c-header:#1a3a4a;
  --c-header2:#0e2535;
  --c-sidebar:#f7f9fa;
  --c-sb-border:#d4dde2;
  --c-white:#fff;
  --c-text1:#1a2e38;
  --c-text2:#4a6070;
  --c-text3:#8a9eaa;
  --c-border:#dde5ea;
  --c-hover:#edf6f9;
  --c-sel:#d0eef5;
  --c-red:#d63030;
  --c-orange:#e07020;
  --c-green:#2a9050;
  --c-chart-blue:#0093b2;
  --c-chart-sea:#6ab4cc;
  --sans:'Noto Sans KR',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --sh:0 2px 8px rgba(0,0,0,.12);
  --sh-sm:0 1px 4px rgba(0,0,0,.08);
}

*{margin:0;padding:0;box-sizing:border-box}

html, body, #root {
  height:100%;
  width:100%;
  overflow:hidden;
}

body {
  font-family:var(--sans);
  background:var(--c-white);
  color:var(--c-text1);
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-size:13px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Scrollbar */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:2px}

/* VHF-DSC blink animation */
@keyframes vblink{0%,100%{opacity:1}50%{opacity:.25}}

/* Vessel popup pulse */
@keyframes vp-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Spinner */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* deck.gl tooltip */
.deck-tooltip{
  background:rgba(26,58,74,.96)!important;
  color:#fff!important;
  border:1px solid rgba(0,147,178,.35)!important;
  border-radius:6px!important;
  box-shadow:0 6px 20px rgba(0,0,0,.35)!important;
  padding:7px 9px!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-family:'Noto Sans KR',system-ui,sans-serif!important;
  pointer-events:none!important;
  max-width:300px!important;
}

button {
  font-family:var(--sans);
}

input:focus {
  outline:none;
}