.shortcut,
.shortcut:link,
.shortcut:visited {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;

  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 17px 24px !important;

  border: 0 !important;
  border-radius: 10px !important;

  background-color: #000000 !important;
  color: #ffffff !important;

  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.4px !important;
  text-decoration: none !important;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;

  cursor: pointer !important;

  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease !important;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.shortcut:hover {
  background-color: #151515 !important;
  color: #ffffff !important;
  text-decoration: none !important;

  box-shadow: 0 8px 19px rgba(0, 0, 0, 0.31) !important;
}

.shortcut:active {
  background-color: #050505 !important;

  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.24) !important;
}

.shortcut:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.25) !important;
  outline-offset: 4px !important;
}

/* 글자 */
.shortcut-text {
  display: inline-block !important;

  color: #ffffff !important;

  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;

  text-decoration: none !important;

  animation: none !important;
  transform: none !important;
}

/* 아이콘 영역 */
.shortcut-icon-box {
  position: relative !important;

  /* 아이콘과 클릭 원을 살짝 아래에 배치 */
  top: 1px !important;

  display: flex !important;

  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;

  /* PC 커서 클릭 원 위치 */
  --click-x: 7.5px;
  --click-y: 10px;
}

/* 공통 아이콘 */
.shortcut-icon {
  position: absolute !important;
  z-index: 2 !important;

  display: block;

  width: 20px !important;
  height: 20px !important;

  fill: none !important;
  stroke: #ffffff !important;

  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  transform-origin: center center !important;

  pointer-events: none !important;

  will-change: transform;
}

/* PC용 커서 */
.shortcut .cursor-icon {
  display: block !important;

  fill: #ffffff !important;
  stroke: #ffffff !important;

  animation:
    shortcut-pc-auto-click
    4.2s
    ease-in-out
    infinite !important;
}

/* 모바일 손가락은 PC에서 숨김 */
.shortcut .finger-icon {
  display: none !important;
}

/* 클릭 원 */
.shortcut-click-ring {
  position: absolute !important;
  z-index: 4 !important;

  left: var(--click-x) !important;
  top: var(--click-y) !important;

  display: block !important;

  width: 9px !important;
  height: 9px !important;

  box-sizing: border-box !important;

  border: 2.2px solid rgba(255, 255, 255, 1) !important;
  border-radius: 50% !important;

  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 9px rgba(255, 255, 255, 0.55) !important;

  opacity: 0;

  pointer-events: none !important;

  transform:
    translate(-50%, -50%)
    scale(0.25);

  transform-origin: center center !important;

  will-change: transform, opacity;

  animation:
    shortcut-pc-auto-ring
    4.2s
    ease-out
    infinite !important;
}

/* PC 커서 자동 클릭 */
@keyframes shortcut-pc-auto-click {
  0%,
  30% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  40% {
    transform:
      translate3d(-0.5px, 0.5px, 0)
      scale(1);
  }

  48%,
  55% {
    transform:
      translate3d(-1px, 1.5px, 0)
      scale(0.86);
  }

  64% {
    transform:
      translate3d(-0.5px, 0.5px, 0)
      scale(1.05);
  }

  74%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}

/* PC 클릭 원 */
@keyframes shortcut-pc-auto-ring {
  0%,
  43% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.25);
  }

  48% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(0.55);
  }

  58% {
    opacity: 0.85;

    transform:
      translate(-50%, -50%)
      scale(1.2);
  }

  68% {
    opacity: 0.4;

    transform:
      translate(-50%, -50%)
      scale(1.9);
  }

  78%,
  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(2.5);
  }
}

/* 모바일 */
@media screen and (max-width: 768px) {
  .shortcut,
  .shortcut:link,
  .shortcut:visited {
    padding: 16px 20px !important;

    font-size: 20px !important;
  }

  .shortcut-icon-box {
    top: 1px !important;

    /* 모바일 손가락 클릭 원 위치 */
    --click-x: 13.5px;
    --click-y: 8px;
  }

  .shortcut .cursor-icon {
    display: none !important;
    animation: none !important;
  }

  .shortcut .finger-icon {
    display: block !important;

    animation:
      shortcut-mobile-auto-click
      4.2s
      ease-in-out
      infinite !important;
  }

  .shortcut-click-ring {
    animation:
      shortcut-mobile-auto-ring
      4.2s
      ease-out
      infinite !important;
  }

  .shortcut:active .finger-icon {
    animation:
      shortcut-mobile-auto-click
      4.2s
      ease-in-out
      infinite !important;
  }

  .shortcut:active .shortcut-click-ring {
    animation:
      shortcut-mobile-auto-ring
      4.2s
      ease-out
      infinite !important;
  }
}

/* 모바일 손가락 자동 클릭 */
@keyframes shortcut-mobile-auto-click {
  0%,
  30% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  40% {
    transform:
      translate3d(0, 0.5px, 0)
      scale(1);
  }

  48%,
  55% {
    transform:
      translate3d(0, 2px, 0)
      scale(0.86);
  }

  64% {
    transform:
      translate3d(0, 0.5px, 0)
      scale(1.05);
  }

  74%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}

/* 모바일 클릭 원 */
@keyframes shortcut-mobile-auto-ring {
  0%,
  43% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.25);
  }

  48% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(0.55);
  }

  58% {
    opacity: 0.85;

    transform:
      translate(-50%, -50%)
      scale(1.2);
  }

  68% {
    opacity: 0.4;

    transform:
      translate(-50%, -50%)
      scale(1.9);
  }

  78%,
  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(2.5);
  }
}