/* 모바일 브라우저의 기본 탭 하이라이트 대신 메뉴 자체의 활성 색만 사용한다. */
.global-bottom-nav a,
.global-bottom-nav a:focus,
.global-bottom-nav a:active {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background: transparent;
}

.global-bottom-nav a.active:not(.global-main) svg {
  fill: none;
  stroke: var(--nav-green);
}

.global-bottom-nav a:focus-visible {
  outline: 2px solid rgba(8, 118, 83, .28);
  outline-offset: -3px;
  border-radius: 12px;
}

.global-bottom-nav a {
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  transition: color .08s ease, transform .08s ease, opacity .08s ease;
  touch-action: manipulation;
}

.global-bottom-nav svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.2;
}

.global-bottom-nav .global-main span {
  font-size: 11px;
  font-weight: 850;
}

/* 화면이 바뀌기 전 한 프레임에도 선택 결과가 분명히 보이도록 한다. */
.global-bottom-nav a.nav-target {
  color: var(--nav-green);
}

.global-bottom-nav a.nav-target:not(.global-main) {
  transform: translateY(-2px) scale(.94);
}

.global-bottom-nav a.nav-target:not(.global-main) svg {
  stroke: var(--nav-green);
  transform: scale(.9);
}

.global-bottom-nav .global-main.nav-target {
  transform: translateY(-14px) scale(.93);
}

.global-bottom-nav .global-main.nav-target i {
  box-shadow: 0 3px 9px rgba(8, 118, 83, .34);
}

/* 하단 메뉴 아이콘을 홈 바로가기와 같은 정돈된 선형 체계로 맞춘다. */
.global-bottom-nav {
  border-color: rgba(25, 58, 43, .09);
  background: rgba(255, 255, 255, .975);
  box-shadow: 0 -8px 26px rgba(21, 48, 36, .09);
}

.global-bottom-nav a:not(.global-main) svg {
  width: 31px;
  height: 31px;
  padding: 2px;
  border-radius: 9px;
  stroke-width: 1.85;
  transition: color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.global-bottom-nav a:not(.global-main).active svg,
.global-bottom-nav a:not(.global-main).nav-target svg {
  color: var(--nav-green);
  background: #e8f5ef;
  box-shadow: inset 0 0 0 1px rgba(8, 118, 83, .08);
}

.global-bottom-nav a:not(.global-main).active span { color: var(--nav-green); }

.global-bottom-nav .global-main i {
  background: linear-gradient(145deg, #079167, #066b4d);
  box-shadow: 0 7px 18px rgba(8, 118, 83, .28), inset 0 1px rgba(255, 255, 255, .2);
}

.global-bottom-nav .global-main svg {
  width: 29px;
  height: 29px;
  stroke-width: 1.9;
}

.global-bottom-nav a span { letter-spacing: -.02em; }

/* iPhone 문서형 화면에서 복귀할 때 메뉴 전체가 미끄러져 들어오는 것처럼 보이지 않게 한다. */
@media (max-width: 899px) {
  .global-bottom-nav,
  .global-nav-reveal {
    transition: none !important;
  }
}