/* GradientButton
 *
 * 21st.dev "Gradient Button" (serafimcloud) 참고. 원본 소스는 API 키가 필요해 직접 보지 못했고,
 * 공개된 특징(원형 그라데이션 배경 + 1px 그라데이션 테두리, @property 변수 전환)을 바탕으로 구현.
 *
 * 마크업
 *   <a class="g-btn" href="#contact"><span class="g-btn__label">견적 문의</span></a>
 *   <button class="g-btn g-btn--lg" type="submit"><span class="g-btn__label">보내기</span></button>
 *   크기: g-btn--sm(44px) / 기본(52px) / g-btn--lg(58px)
 *
 * 색 바꾸기 (요소에 직접 또는 JS의 GradientButton.setColors)
 *   --gb-rest-1 … --gb-rest-5     기본 그라데이션 (안쪽 → 바깥쪽)
 *   --gb-hover-1 … --gb-hover-5   호버 그라데이션
 *   --gb-border-rest-1/2, --gb-border-hover-1/2   테두리 빛
 *   --gb-glow-hover   호버 때 바깥 빛,  --gb-text 글자색,  --gb-focus 포커스 링
 *
 * 상태: :hover / :active(눌림) / :focus-visible / :disabled·[aria-disabled] / .is-loading
 */

/* 전환 가능한 값: 등록해야 그라데이션이 '보간'된다 (등록 안 하면 뚝 바뀜) */
@property --gb-pos-x { syntax: "<percentage>"; inherits: false; initial-value: 11.14%; }
@property --gb-pos-y { syntax: "<percentage>"; inherits: false; initial-value: 140%; }
@property --gb-spread-x { syntax: "<percentage>"; inherits: false; initial-value: 150%; }
@property --gb-spread-y { syntax: "<percentage>"; inherits: false; initial-value: 180.06%; }
@property --gb-c1 { syntax: "<color>"; inherits: false; initial-value: #000; }
@property --gb-c2 { syntax: "<color>"; inherits: false; initial-value: #000; }
@property --gb-c3 { syntax: "<color>"; inherits: false; initial-value: #000; }
@property --gb-c4 { syntax: "<color>"; inherits: false; initial-value: #000; }
@property --gb-c5 { syntax: "<color>"; inherits: false; initial-value: #000; }
@property --gb-s1 { syntax: "<percentage>"; inherits: false; initial-value: 37.35%; }
@property --gb-s2 { syntax: "<percentage>"; inherits: false; initial-value: 61.36%; }
@property --gb-s3 { syntax: "<percentage>"; inherits: false; initial-value: 78.42%; }
@property --gb-s4 { syntax: "<percentage>"; inherits: false; initial-value: 89.52%; }
@property --gb-s5 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --gb-angle { syntax: "<angle>"; inherits: false; initial-value: 20deg; }
@property --gb-b1 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --gb-b2 { syntax: "<color>"; inherits: false; initial-value: transparent; }

.g-btn {
  /* 브랜드 색 (사이트 포인트 #ff4f1f 기준). 안쪽은 짙은 숯불색, 오른쪽 위 모서리로 갈수록 밝은 불씨 */
  --gb-rest-1: #1a0d08;
  --gb-rest-2: #4a1507;
  --gb-rest-3: #a8290a;
  --gb-rest-4: #ff4f1f;
  --gb-rest-5: #ff8a5c;
  /* 호버: 빛의 중심이 왼쪽 아래로 옮겨오며 밝아진다 */
  --gb-hover-1: #ffd0b5;
  --gb-hover-2: #ff8a5c;
  --gb-hover-3: #ff4f1f;
  --gb-hover-4: #6a1a07;
  --gb-hover-5: #1a0d08;
  --gb-border-rest-1: rgba(255, 138, 92, 0.25);
  --gb-border-rest-2: rgba(255, 79, 31, 0.85);
  --gb-border-hover-1: rgba(255, 220, 200, 0.2);
  --gb-border-hover-2: rgba(255, 208, 181, 0.9);
  --gb-glow-hover: rgba(255, 79, 31, 0.5);
  --gb-text: #fff;
  --gb-focus: #ff4f1f;
  --gb-radius: 6px;
  --gb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gb-dur: 0.5s;

  /* 기본 상태 */
  --gb-pos-x: 11.14%;
  --gb-pos-y: 140%;
  --gb-spread-x: 150%;
  --gb-spread-y: 180.06%;
  --gb-c1: var(--gb-rest-1);
  --gb-c2: var(--gb-rest-2);
  --gb-c3: var(--gb-rest-3);
  --gb-c4: var(--gb-rest-4);
  --gb-c5: var(--gb-rest-5);
  --gb-s1: 20%;
  --gb-s2: 45%;
  --gb-s3: 68%;
  --gb-s4: 88%;
  --gb-s5: 100%;
  --gb-angle: 20deg;
  --gb-b1: var(--gb-border-rest-1);
  --gb-b2: var(--gb-border-rest-2);
  --gb-glow: rgba(255, 79, 31, 0);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  min-width: 132px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--gb-radius);
  background: radial-gradient(
    var(--gb-spread-x) var(--gb-spread-y) at var(--gb-pos-x) var(--gb-pos-y),
    var(--gb-c1) var(--gb-s1),
    var(--gb-c2) var(--gb-s2),
    var(--gb-c3) var(--gb-s3),
    var(--gb-c4) var(--gb-s4),
    var(--gb-c5) var(--gb-s5)
  );
  box-shadow: 0 12px 32px -12px var(--gb-glow);
  color: var(--gb-text);
  font: 700 16px/1.2 var(--font-body, system-ui, sans-serif);
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    --gb-pos-x var(--gb-dur) var(--gb-ease),
    --gb-pos-y var(--gb-dur) var(--gb-ease),
    --gb-spread-x var(--gb-dur) var(--gb-ease),
    --gb-spread-y var(--gb-dur) var(--gb-ease),
    --gb-c1 var(--gb-dur) var(--gb-ease),
    --gb-c2 var(--gb-dur) var(--gb-ease),
    --gb-c3 var(--gb-dur) var(--gb-ease),
    --gb-c4 var(--gb-dur) var(--gb-ease),
    --gb-c5 var(--gb-dur) var(--gb-ease),
    --gb-s1 var(--gb-dur) var(--gb-ease),
    --gb-s2 var(--gb-dur) var(--gb-ease),
    --gb-s3 var(--gb-dur) var(--gb-ease),
    --gb-s4 var(--gb-dur) var(--gb-ease),
    --gb-s5 var(--gb-dur) var(--gb-ease),
    --gb-angle var(--gb-dur) var(--gb-ease),
    --gb-b1 var(--gb-dur) var(--gb-ease),
    --gb-b2 var(--gb-dur) var(--gb-ease),
    box-shadow var(--gb-dur) var(--gb-ease),
    transform 0.12s ease;
}

/* 빛나는 1px 테두리: 그라데이션을 깔고 안쪽(content-box)을 마스크로 뚫는다 */
.g-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(var(--gb-angle), var(--gb-b1), var(--gb-b2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.g-btn__label { position: relative; }

/* 호버(키보드 포커스 때도 같은 빛) */
.g-btn:not(:disabled):not([aria-disabled="true"]):hover,
.g-btn:not(:disabled):not([aria-disabled="true"]):focus-visible {
  --gb-pos-x: 0%;
  --gb-pos-y: 91.51%;
  --gb-spread-x: 120.24%;
  --gb-spread-y: 103.18%;
  --gb-c1: var(--gb-hover-1);
  --gb-c2: var(--gb-hover-2);
  --gb-c3: var(--gb-hover-3);
  --gb-c4: var(--gb-hover-4);
  --gb-c5: var(--gb-hover-5);
  --gb-s1: 0%;
  --gb-s2: 8.8%;
  --gb-s3: 21.44%;
  --gb-s4: 71.34%;
  --gb-s5: 85.76%;
  --gb-angle: 190deg;
  --gb-b1: var(--gb-border-hover-1);
  --gb-b2: var(--gb-border-hover-2);
  --gb-glow: var(--gb-glow-hover);
}

/* 클릭: 가볍게 눌림 */
.g-btn:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 6px 18px -10px var(--gb-glow);
}

/* 키보드 포커스: 어두운 배경·밝은 배경 모두에서 보이는 포인트 색 링 */
.g-btn:focus-visible {
  outline: 2px solid var(--gb-focus);
  outline-offset: 3px;
}

/* 비활성 */
.g-btn:disabled:not(.is-loading),
.g-btn[aria-disabled="true"]:not(.is-loading) {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.5);
}

/* 로딩: 너비를 유지한 채 스피너 + 진행 문구 */
.g-btn.is-loading { cursor: progress; }
.g-btn.is-loading::after {
  content: "";
  order: -1;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--gb-text);
  border-radius: 50%;
  animation: gb-spin 0.8s linear infinite;
}
@keyframes gb-spin {
  to { transform: rotate(360deg); }
}

/* 크기 */
.g-btn--sm {
  min-height: 44px;
  min-width: 0;
  padding: 0 20px;
  font-size: 14px;
  gap: 8px;
}
.g-btn--lg {
  min-height: 58px;
  padding: 0 40px;
  font-size: 17px;
}

/* 동작 줄이기: 위치 이동·눌림 크기 변화는 빼고, 색 전환은 짧게 */
@media (prefers-reduced-motion: reduce) {
  .g-btn { --gb-dur: 0.15s; }
  .g-btn:not(:disabled):not([aria-disabled="true"]):active {
    transform: none;
    filter: brightness(0.9);
  }
  .g-btn.is-loading::after { animation-duration: 1.6s; }
}