/* 홈 주요 메뉴: 같은 조형 체계 안에서 기능별 색과 선형 아이콘을 구분한다. */
.quick-menu a,
.quick-menu button {
  --quick-color: #087653;
  --quick-soft: #e9f5ef;
  position: relative;
  height: 108px;
  padding: 11px 4px 9px;
  overflow: hidden;
  border: 1px solid #e6ede9;
  border-radius: 19px;
  background: linear-gradient(155deg, #fff 10%, #f5f8f6 100%);
  box-shadow: 0 5px 14px rgba(20, 55, 39, .055);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.quick-menu a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--quick-color);
  opacity: .9;
}

.quick-menu a.quick-stats { --quick-color: #173b58; --quick-soft: #eaf0f5; }
.quick-menu a.quick-transactions { --quick-color: #147a70; --quick-soft: #e7f4f1; }
.quick-menu a.quick-checker { --quick-color: #087653; --quick-soft: #e4f3ec; }
.quick-menu a.quick-columns { --quick-color: #66763b; --quick-soft: #f0f3e7; }

.quick-menu i {
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  border-radius: 15px;
  color: var(--quick-color);
  background: var(--quick-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
  transition: transform .15s ease;
}

.quick-menu i svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
}

.quick-menu i svg .accent { stroke-width: 2.8; }
.quick-menu span { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.quick-menu a:active { transform: translateY(1px) scale(.975); box-shadow: 0 2px 7px rgba(20, 55, 39, .04); }
.quick-menu a:active i { transform: scale(.94); }
.quick-menu a:focus-visible { outline: 3px solid rgba(8, 118, 83, .18); outline-offset: 2px; }

@media (hover: hover) {
  .quick-menu a:hover {
    border-color: #cadbd2;
    box-shadow: 0 8px 20px rgba(20, 55, 39, .09);
    transform: translateY(-2px);
  }
}

@media (max-width: 460px) {
  .quick-menu a,
  .quick-menu button { height: 98px; border-radius: 16px; }
  .quick-menu i { width: 44px; height: 44px; border-radius: 13px; }
  .quick-menu i svg { width: 28px; height: 28px; }
  .quick-menu span { font-size: 13px; }
}