/* ==========================================================
   녹색 버튼 · 링크 별무리 효과 — 게시판 · 마케팅 · 솔루션 · 요금 · 회원 · 약관 페이지가 함께 씀
   - 색 · 글꼴은 1번 구역의 값만 바꾸면 페이지 전체에 적용됩니다.
   - "@media (max-width: 860px)" = 화면 폭이 860px 이하(태블릿 · 휴대폰)일 때만 적용되는 규칙입니다.
   목차
   ========================================================== */
/* 버튼에 마우스를 올리면: 초록이 채워지면서 흰 별무리가 왼쪽에서 오른쪽으로 따라 나타남 */
/* 녹색 버튼 */
.g-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  --st-r: 54px;
  background: url(../images/deco/stars-head-w.png) right var(--st-r) bottom 3px/2.2em 1.9em no-repeat,url(../images/deco/stars-stem-w.png) left 0 bottom 3px/calc(100% - 2.2em - var(--st-r)) 1.9em no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s cubic-bezier(.6,.05,.25,1) .06s;
}

.g-btn:hover::after,.g-btn:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

/* 기기 설정에서 "움직임 줄이기"를 켠 방문자 — 애니메이션을 끔 */
@media (prefers-reduced-motion:reduce) {
  .g-btn::after {
    transition: none;
  }
}