/**
 * KTheme Button Library
 * 확장된 버튼 스타일 라이브러리
 * 
 * @version 1.0.0
 * @author KTheme
 */

/* ========================================
   Bootstrap 초기화 (Bootstrap Reset)
   ======================================== */

/* Bootstrap 기본 border 제거 */
.btn {
  border: none !important;
  box-shadow: none !important;
}

/* Bootstrap focus 스타일 제거 */
.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Bootstrap active 스타일 제거 */
.btn:active,
.btn.active {
  box-shadow: none !important;
  border: none !important;
}

/* Bootstrap disabled 스타일 제거 */
.btn:disabled,
.btn.disabled {
  box-shadow: none !important;
  border: none !important;
}

/* ========================================
   1. 기본 버튼 스타일 클래스 (Base Style)
   ======================================== */

/* 1.3 추가 스타일 클래스 */
.btn-ghost {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: inherit;
}

/* 모든 버튼에 대한 기본 border 초기화 */
.btn,
.btn:focus,
.btn:active,
.btn:hover,
.btn:disabled {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 테두리 시프트 방지 - 투명한 테두리로 레이아웃 고정 */
.btn-hover-slide-down,
.btn-hover-slide-up,
.btn-hover-slide-left,
.btn-hover-slide-right,
.btn-hover-opacity {
  border: 1px solid transparent !important;
}

.btn-hover-slide-down:hover,
.btn-hover-slide-up:hover,
.btn-hover-slide-left:hover,
.btn-hover-slide-right:hover,
.btn-hover-opacity:hover {
  border: 1px solid transparent !important;
}

/* 호버 시 배경 검정 + 텍스트 흰색 + 부드러운 배경색상변환 */
.btn-hover-invert {
  transition: all 0.3s ease;
}

.btn-hover-invert:hover {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

.btn-ghost-primary {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: var(--bs-primary) !important;
}

.btn-ghost-dark {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: var(--bs-dark) !important;
}

.btn-ghost-gradient {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   1. 기본 버튼 스타일
   ======================================== */

/* 1.1 Outline 버튼 기본 스타일 */
.btn-outline-primary {
  border: 1px solid var(--bs-primary) !important;
}

.btn-outline-primary:hover {
  border: 1px solid transparent !important;
}

.btn-outline-secondary {
  border: 1px solid var(--bs-secondary) !important;
}

.btn-outline-secondary:hover {
  border: 1px solid transparent !important;
}

.btn-outline-success {
  border: 1px solid var(--bs-success) !important;
}

.btn-outline-success:hover {
  border: 1px solid transparent !important;
}

.btn-outline-danger {
  border: 1px solid var(--bs-danger) !important;
}

.btn-outline-danger:hover {
  border: 1px solid transparent !important;
}

.btn-outline-warning {
  border: 1px solid var(--bs-warning) !important;
}

.btn-outline-warning:hover {
  border: 1px solid transparent !important;
}

.btn-outline-info {
  border: 1px solid var(--bs-info) !important;
}

.btn-outline-info:hover {
  border: 1px solid transparent !important;
}

.btn-outline-light {
  border: 1px solid var(--bs-light) !important;
}

.btn-outline-light:hover {
  border: 1px solid transparent !important;
}

.btn-outline-dark {
  border: 1px solid var(--bs-dark) !important;
}

.btn-outline-dark:hover {
  border: 1px solid transparent !important;
}

/* ========================================
   2. 그라디언트 클래스
   ======================================== */

/* 2.1 배경 그라디언트 */
.btn-gradient-primary {
  background: linear-gradient(45deg, #3f0071, #fb2576) !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  border: none !important;
  color: white !important;
  transition: background-position 0.3s ease !important;
}

.btn-gradient-primary:hover {
  background-position: right center !important;
}

.btn-gradient-secondary {
  background: linear-gradient(45deg, #fb2576, #332fd0) !important;
  border: none !important;
  color: white !important;
}

.btn-gradient-success {
  background: linear-gradient(45deg, #332fd0, #0002a1) !important;
  border: none !important;
  color: white !important;
}

.btn-gradient-danger {
  background: linear-gradient(45deg, #0002a1, #bad7e9) !important;
  border: none !important;
  color: white !important;
}

.btn-gradient-warning {
  background: linear-gradient(45deg, #bad7e9, #d6e4e5) !important;
  border: none !important;
  color: var(--bs-dark) !important;
}

.btn-gradient-info {
  background: linear-gradient(45deg, #d6e4e5, #fafafa) !important;
  border: none !important;
  color: var(--bs-dark) !important;
}

.btn-gradient-light {
  background: linear-gradient(45deg, #fafafa, #eee) !important;
  border: none !important;
  color: var(--bs-dark) !important;
}

.btn-gradient-dark {
  background: linear-gradient(45deg, #333, #3335) !important;
  border: none !important;
  color: white !important;
}

/* 2.2 그라디언트 방향 */
.btn-gradient-h {
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-gradient-h:hover {
  background-position: right center !important;
}

.btn-gradient-v {
  background: linear-gradient(180deg, var(--bs-primary), var(--bs-secondary)) !important;
  background-size: 100% 200% !important;
  background-position: top center !important;
  transition: background-position 0.3s ease !important;
}

.btn-gradient-v:hover {
  background-position: bottom center !important;
}

.btn-gradient-diagonal {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary)) !important;
  background-size: 200% 200% !important;
  background-position: top left !important;
  transition: background-position 0.3s ease !important;
}

.btn-gradient-diagonal:hover {
  background-position: bottom right !important;
}

.btn-gradient-radial {
  background: radial-gradient(circle, var(--bs-primary), var(--bs-secondary)) !important;
  background-size: 200% 200% !important;
  background-position: center !important;
  transition: background-position 0.3s ease !important;
}

.btn-gradient-radial:hover {
  background-position: 50% 50% !important;
}

/* 2.3 텍스트 그라디언트 */
.btn-text-gradient-primary {
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-text-gradient-secondary {
  background: linear-gradient(45deg, var(--bs-secondary), var(--bs-info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-text-gradient-success {
  background: linear-gradient(45deg, var(--bs-success), var(--bs-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-text-gradient-danger {
  background: linear-gradient(45deg, var(--bs-danger), var(--bs-warning));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-text-gradient-warning {
  background: linear-gradient(45deg, var(--bs-warning), var(--bs-danger));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-text-gradient-info {
  background: linear-gradient(45deg, var(--bs-info), var(--bs-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-text-gradient-light {
  background: linear-gradient(45deg, var(--bs-light), var(--bs-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-text-gradient-dark {
  background: linear-gradient(45deg, var(--bs-dark), var(--bs-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 2.3 그라디언트 테두리 */
.btn-border-gradient-primary {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-primary), var(--bs-secondary)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-border-gradient-primary:hover {
  background-position: center right !important;
  border: 2px solid transparent !important;
}

.btn-border-gradient-secondary {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-secondary), var(--bs-info)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-border-gradient-secondary:hover {
  background-position: center right !important;
  border: 2px solid transparent !important;
}

.btn-border-gradient-success {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-success), var(--bs-primary)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-border-gradient-success:hover {
  background-position: center right !important;
  border: 2px solid transparent !important;
}

.btn-border-gradient-danger {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-danger), var(--bs-warning)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-border-gradient-danger:hover {
  background-position: 50% left !important;
}

.btn-border-gradient-warning {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-warning), var(--bs-danger)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-border-gradient-warning:hover {
  background-position: 50% left !important;
}

.btn-border-gradient-info {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-info), var(--bs-primary)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-border-gradient-info:hover {
  background-position: 50% left !important;
}

.btn-border-gradient-light {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-light), var(--bs-dark)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-border-gradient-light:hover {
  background-position: 50% left !important;
}

.btn-border-gradient-dark {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-dark), var(--bs-primary)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 0.3s ease !important;
}

.btn-border-gradient-dark:hover {
  background-position: 50% left !important;
}

/* 2.4 그라디언트 테두리 호버 효과 */
.btn-border-gradient-hover-primary {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-primary), var(--bs-secondary)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: all 0.3s ease !important;
}

.btn-border-gradient-hover-primary:hover {
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary)) !important;
  border: 2px solid transparent !important;
  background-size: 200% 100% !important;
  background-position: center right !important;
}

.btn-border-gradient-hover-secondary {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-secondary), var(--bs-info)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: all 0.3s ease !important;
}

.btn-border-gradient-hover-secondary:hover {
  background: linear-gradient(45deg, var(--bs-secondary), var(--bs-info)) !important;
  border: 2px solid transparent !important;
  background-size: 200% 100% !important;
  background-position: center right !important;
}

.btn-border-gradient-hover-success {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-success), var(--bs-primary)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: all 0.3s ease !important;
}

.btn-border-gradient-hover-success:hover {
  background: linear-gradient(45deg, var(--bs-success), var(--bs-primary)) !important;
  border: 2px solid transparent !important;
  background-size: 200% 100% !important;
  background-position: center right !important;
}

.btn-border-gradient-hover-danger {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-danger), var(--bs-warning)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: all 0.3s ease !important;
}

.btn-border-gradient-hover-danger:hover {
  background: linear-gradient(45deg, var(--bs-danger), var(--bs-warning)) !important;
  border: 2px solid transparent !important;
  background-size: 200% 100% !important;
  background-position: center right !important;
}

.btn-border-gradient-hover-warning {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-warning), var(--bs-danger)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: all 0.3s ease !important;
}

.btn-border-gradient-hover-warning:hover {
  background: linear-gradient(45deg, var(--bs-warning), var(--bs-danger)) !important;
  border: 2px solid transparent !important;
  background-size: 200% 100% !important;
  background-position: center right !important;
}

.btn-border-gradient-hover-info {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-info), var(--bs-primary)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: all 0.3s ease !important;
}

.btn-border-gradient-hover-info:hover {
  background: linear-gradient(45deg, var(--bs-info), var(--bs-primary)) !important;
  border: 2px solid transparent !important;
  background-size: 200% 100% !important;
  background-position: center right !important;
}

.btn-border-gradient-hover-light {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-light), var(--bs-dark)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: all 0.3s ease !important;
}

.btn-border-gradient-hover-light:hover {
  background: linear-gradient(45deg, var(--bs-light), var(--bs-dark)) !important;
  border: 2px solid transparent !important;
  background-size: 200% 100% !important;
  background-position: center right !important;
}

.btn-border-gradient-hover-dark {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, var(--bs-dark), var(--bs-primary)) border-box !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: all 0.3s ease !important;
}

.btn-border-gradient-hover-dark:hover {
  background: linear-gradient(45deg, var(--bs-dark), var(--bs-primary)) !important;
  border: 2px solid transparent !important;
  background-size: 200% 100% !important;
  background-position: center right !important;
}

/* 2.5 호버 전용 텍스트 색상 */
.text-hover-primary:hover {
  color: var(--bs-primary) !important;
}

.text-hover-secondary:hover {
  color: var(--bs-secondary) !important;
}

.text-hover-success:hover {
  color: var(--bs-success) !important;
}

.text-hover-danger:hover {
  color: var(--bs-danger) !important;
}

.text-hover-warning:hover {
  color: var(--bs-warning) !important;
}

.text-hover-info:hover {
  color: var(--bs-info) !important;
}

.text-hover-light:hover {
  color: var(--bs-light) !important;
}

.text-hover-dark:hover {
  color: var(--bs-dark) !important;
}

.text-hover-white:hover {
  color: white !important;
}

.text-hover-black:hover {
  color: black !important;
}

.text-hover-muted:hover {
  color: var(--bs-secondary-color) !important;
}

/* ========================================
   3. 크기 클래스
   ======================================== */

/* 3.2 추가 크기 */
.btn-xs {
  --bs-btn-padding-y: 0.125rem;
  --bs-btn-padding-x: 0.25rem;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-xl {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: 1.5rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}

/* 3.3 패딩 조정 */
.btn-wide {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.btn-narrow {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.btn-tall {
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

.btn-compact {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}

/* 3.4 너비 옵션 */
.btn-square {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   4. 모서리 클래스
   ======================================== */

/* 4.2 호버 시 모서리 변경 */
.btn.btn-morph-rounded {
  transition: border-radius 0.8s ease !important;
}

.btn-morph-rounded:hover {
  border-radius: 5rem !important;
}

.btn-morph-square {
  transition: border-radius 0.3s ease !important;
}

.btn-morph-square:hover {
  border-radius: 0 !important;
}

/* ========================================
   5. 그림자 클래스
   ======================================== */

/* 5.2 추가 그림자 */
.shadow-xl {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-inner {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075) !important;
}

.shadow-colored {
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

.shadow-colored-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-primary-rgb), 0.075) !important;
}

.shadow-colored-lg {
  box-shadow: 0 1rem 3rem rgba(var(--bs-primary-rgb), 0.175) !important;
}

/* 5.3 호버 그림자 */
.btn-hover-shadow {
  transition: box-shadow 0.3s ease !important;
}

.btn-hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.btn-hover-shadow-lg:hover {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.btn-hover-shadow-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.btn-hover-shadow-lift:hover {
  transform: translateX(-2px) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.btn-hover-shadow-glow:hover {
  box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5) !important;
}

/* ========================================
   6. 호버 배경 효과
   ======================================== */

/* 6.1 색상 전환 */
.btn-hover-darken {
  transition: filter 0.3s ease !important;
}

.btn-hover-darken:hover {
  filter: brightness(0.8) !important;
}

.btn-hover-lighten {
  transition: filter 0.3s ease !important;
}

.btn-hover-lighten:hover {
  filter: brightness(1.2) !important;
}

.btn-hover-fill {
  background-color: transparent !important;
  border: 1px solid currentColor !important;
  transition: all 0.3s ease !important;
}

.btn-hover-fill:hover {
  background-color: currentColor !important;
  color: white !important;
}

.btn-hover-outline {
  transition: all 0.3s ease !important;
}

.btn-hover-outline:hover {
  background-color: transparent !important;
  border: 1px solid currentColor !important;
}

.btn-hover-gradient {
  transition: all 0.3s ease !important;
}

.btn-hover-gradient:hover {
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary)) !important;
  border: none !important;
  color: white !important;
}

.btn-hover-solid {
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary)) !important;
  transition: all 0.3s ease !important;
}

.btn-hover-solid:hover {
  background: var(--bs-primary) !important;
}

/* 6.2 배경 애니메이션 */
.btn-hover-shine {
  position: relative;
  overflow: hidden;
}

.btn-hover-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-hover-shine:hover::before {
  left: 100%;
}

.btn-hover-ripple {
  position: relative;
  overflow: hidden;
}

.btn-hover-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-hover-ripple:hover::before {
  width: 300px;
  height: 300px;
}

.btn-hover-sweep {
  position: relative;
  overflow: hidden;
}

.btn-hover-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.3s ease;
}

.btn-hover-sweep:hover::before {
  left: 0;
}

.btn-hover-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.btn-hover-liquid {
  position: relative;
  overflow: hidden;
}

.btn-hover-liquid::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: height 0.3s ease;
}

.btn-hover-liquid:hover::before {
  height: 100%;
}

/* 6.6 슬라이드 배경 효과 (Filled) */
.btn-hover-filled-slide-down {
  position: relative;
  overflow: hidden;
}

.btn-hover-filled-slide-down::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bs-dark);
  transition: height 0.3s ease-out;
  z-index: 1;
}

.btn-hover-filled-slide-down span {
  position: relative;
  z-index: 2;
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-filled-slide-down:hover::before {
  height: 0%;
}

.btn-hover-filled-slide-down:hover span {
  color: var(--bs-dark);
}

.btn-hover-filled-slide-up {
  position: relative;
  overflow: hidden;
}

.btn-hover-filled-slide-up::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bs-dark);
  transition: height 0.3s ease-out;
  z-index: 1;
}

.btn-hover-filled-slide-up span {
  position: relative;
  z-index: 2;
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-filled-slide-up:hover::before {
  height: 0%;
}

.btn-hover-filled-slide-up:hover span {
  color: var(--bs-dark);
}

.btn-hover-filled-slide-left {
  position: relative;
  overflow: hidden;
}

.btn-hover-filled-slide-left::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bs-dark);
  transition: width 0.3s ease-out;
  z-index: 1;
}

.btn-hover-filled-slide-left span {
  position: relative;
  z-index: 2;
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-filled-slide-left:hover::before {
  width: 0%;
}

.btn-hover-filled-slide-left:hover span {
  color: var(--bs-dark);
}

.btn-hover-filled-slide-right {
  position: relative;
  overflow: hidden;
}

.btn-hover-filled-slide-right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bs-dark);
  transition: width 0.3s ease-out;
  z-index: 1;
}

.btn-hover-filled-slide-right span {
  position: relative;
  z-index: 2;
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-filled-slide-right:hover::before {
  width: 0%;
}

.btn-hover-filled-slide-right:hover span {
  color: var(--bs-dark);
}

.btn-hover-filled-opacity {
  position: relative;
  overflow: hidden;
}

.btn-hover-filled-opacity::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bs-dark);
  opacity: 1;
  transition: opacity 0.3s ease-out;
  z-index: 1;
}

.btn-hover-filled-opacity span {
  position: relative;
  z-index: 2;
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-filled-opacity:hover::before {
  opacity: 0;
}

.btn-hover-filled-opacity:hover span {
  color: var(--bs-dark);
}

/* 6.7 슬라이드 배경 효과 (Empty) */
.btn-hover-slide-down {
  position: relative;
  overflow: hidden;
  background-color: var(--bs-white) !important;
  border: 1px solid transparent !important;
}

.btn-hover-slide-down::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 1;
}

.btn-hover-slide-down::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  width: 100%;
  background-color: var(--bs-dark);
  transition: height 0.3s ease-out;
  z-index: 1;
}

.btn-hover-slide-down span {
  position: relative;
  z-index: 2;
  color: var(--bs-dark);
  transition: color 0.2s;
}

.btn-hover-slide-down:hover::before {
  height: 100%;
}

.btn-hover-slide-down:hover span {
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-slide-up {
  position: relative;
  overflow: hidden;
  background-color: var(--bs-white) !important;
  border: 1px solid transparent !important;
}

.btn-hover-slide-up::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 1;
}

.btn-hover-slide-up::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  width: 100%;
  background-color: var(--bs-dark);
  transition: height 0.3s ease-out;
  z-index: 1;
}

.btn-hover-slide-up span {
  position: relative;
  z-index: 2;
  color: var(--bs-dark);
  transition: color 0.2s;
}

.btn-hover-slide-up:hover::before {
  height: 100%;
}

.btn-hover-slide-up:hover span {
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-slide-left {
  position: relative;
  overflow: hidden;
  background-color: var(--bs-white) !important;
  border: 1px solid transparent !important;
}

.btn-hover-slide-left::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 1;
}

.btn-hover-slide-left::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 0%;
  background-color: var(--bs-dark);
  transition: width 0.3s ease-out;
  z-index: 1;
}

.btn-hover-slide-left span {
  position: relative;
  z-index: 2;
  color: var(--bs-dark);
  transition: color 0.2s;
}

.btn-hover-slide-left:hover::before {
  width: 100%;
}

.btn-hover-slide-left:hover span {
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-slide-right {
  position: relative;
  overflow: hidden;
  background-color: var(--bs-white) !important;
  border: 1px solid transparent !important;
}

.btn-hover-slide-right::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 1;
}

.btn-hover-slide-right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--bs-dark);
  transition: width 0.3s ease-out;
  z-index: 1;
}

.btn-hover-slide-right span {
  position: relative;
  z-index: 2;
  color: var(--bs-dark);
  transition: color 0.2s;
}

.btn-hover-slide-right:hover::before {
  width: 100%;
}

.btn-hover-slide-right:hover span {
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}

.btn-hover-opacity {
  position: relative;
  overflow: hidden;
  background-color: var(--bs-white) !important;
  border: 1px solid transparent !important;
}

.btn-hover-opacity::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 1;
}

.btn-hover-opacity::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bs-dark);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  z-index: 1;
}

.btn-hover-opacity span {
  position: relative;
  z-index: 2;
  color: var(--bs-dark);
  transition: color 0.2s;
}

.btn-hover-opacity:hover::before {
  opacity: 1;
}

.btn-hover-opacity:hover span {
  color: var(--bs-white);
  transition: color 0.2s 0.1s;
}


/* ========================================
   7. 호버 이동 효과
   ======================================== */

/* 7.1 기본 이동 */
.btn-hover-lift {
  transition: transform 0.3s ease !important;
}

.btn-hover-lift:hover {
  transform: translateY(-4px) !important;
}

.btn-hover-lift-sm:hover {
  transform: translateY(-2px) !important;
}

.btn-hover-lift-lg:hover {
  transform: translateY(-8px) !important;
}

.btn-hover-push:hover {
  transform: translateX(2px) !important;
}

/* 7.2 스케일 효과 */
.btn-hover-grow {
  transition: transform 0.3s ease !important;
}

.btn-hover-grow:hover {
  transform: scale(1.05) !important;
}

.btn-hover-grow-sm:hover {
  transform: scale(1.02) !important;
}

.btn-hover-grow-lg:hover {
  transform: scale(1.1) !important;
}

.btn-hover-shrink:hover {
  transform: scale(0.95) !important;
}

/* 7.3 3D 효과 */
.btn-hover-tilt {
  transition: transform 0.3s ease !important;
}

.btn-hover-tilt:hover {
  transform: perspective(1000px) rotateX(10deg) rotateY(10deg) !important;
}

.btn-hover-depth {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.btn-hover-depth:hover {
  transform: translateZ(10px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ========================================
   8. 텍스트 애니메이션
   ======================================== */

/* 8.1 슬라이드 효과 */
.btn-text-slide-up {
  position: relative;
  overflow: hidden;
}

.btn-text-slide-up span {
  display: inline-block;
  transition: transform 0.3s ease;
  transform: translateY(0);
}

.btn-text-slide-up:hover span {
  transform: translateY(-10%);
}

.btn-text-slide-down {
  position: relative;
  overflow: hidden;
}

.btn-text-slide-down span {
  display: inline-block;
  transition: transform 0.3s ease;
  transform: translateY(0);
}

.btn-text-slide-down:hover span {
  transform: translateY(10%);
}

.btn-text-slide-left {
  position: relative;
  overflow: hidden;
}

.btn-text-slide-left span {
  display: inline-block;
  transition: transform 0.3s ease;
  transform: translateX(0);
}

.btn-text-slide-left:hover span {
  transform: translateX(-10%);
}

.btn-text-slide-right {
  position: relative;
  overflow: hidden;
}

.btn-text-slide-right span {
  display: inline-block;
  transition: transform 0.3s ease;
  transform: translateX(0);
}

.btn-text-slide-right:hover span {
  transform: translateX(10%);
}

/* 8.2 페이드 효과 */
.btn-text-fade {
  position: relative;
  overflow: hidden;
}

.btn-text-fade span {
  display: inline-block;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.btn-text-fade:hover span {
  opacity: 0;
}

.btn-text-fade-in span {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-text-fade-in:hover span {
  opacity: 1;
}

.btn-text-fade-switch {
  position: relative;
  overflow: hidden;
}

.btn-text-fade-switch span {
  display: inline-block;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.btn-text-fade-switch:hover span {
  opacity: 0;
}

/* 8.3 Winona 스타일 (호버 시 텍스트 슬라이드) */
.btn-text-winona {
  position: relative;
  overflow: hidden;
  transition: border-color 0.45s, background-color 0.45s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.5, 1);
}

.btn-text-winona::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  color: var(--bs-primary);
  transform: translate3d(0, 25%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

.btn-text-winona::after,
.btn-text-winona span {
  transition: transform 0.45s, opacity 0.45s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.5, 1);
}

.btn-text-winona:hover {
  border-color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.btn-text-winona:hover::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.btn-text-winona:hover span {
  opacity: 0;
  transform: translate3d(0, -25%, 0);
}

/* 8.4 Nina 스타일 (글자별 순차적 슬라이드) */
.btn-text-nina {
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s;
}

.btn-text-nina span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition: transform 0.3s, opacity 0.3s;
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-text-nina::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  transition: transform 0.3s, opacity 0.3s;
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-text-nina:hover::before {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}

.btn-text-nina:hover span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Nina 스타일 순차적 애니메이션 지연 시간 (더 천천히) */
.btn-text-nina:hover span:nth-child(1) { transition-delay: 0.08s; }
.btn-text-nina:hover span:nth-child(2) { transition-delay: 0.16s; }
.btn-text-nina:hover span:nth-child(3) { transition-delay: 0.24s; }
.btn-text-nina:hover span:nth-child(4) { transition-delay: 0.32s; }
.btn-text-nina:hover span:nth-child(5) { transition-delay: 0.4s; }
.btn-text-nina:hover span:nth-child(6) { transition-delay: 0.48s; }
.btn-text-nina:hover span:nth-child(7) { transition-delay: 0.56s; }
.btn-text-nina:hover span:nth-child(8) { transition-delay: 0.64s; }
.btn-text-nina:hover span:nth-child(9) { transition-delay: 0.72s; }
.btn-text-nina:hover span:nth-child(10) { transition-delay: 0.8s; }

/* 8.4 스케일 효과 */
.btn-text-scale-up span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-text-scale-up:hover span {
  transform: scale(1.1);
}

.btn-text-scale-down span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-text-scale-down:hover span {
  transform: scale(0.9);
}

/* 8.5 글리치 효과 */
.btn-text-glitch {
  position: relative;
}

.btn-text-glitch:hover {
  animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* ========================================
   9. 아이콘 애니메이션
   ======================================== */

/* 9.1 이동 효과 */
.btn-icon-slide-right {
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--bs-btn-padding-x) + 1rem) !important;
  padding-right: calc(var(--bs-btn-padding-x) + 1rem) !important;
}

.btn-icon-slide-right .btn-text {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-icon-slide-right .btn-icon {
  display: inline-block;
  margin-left: -16px;
  opacity: 0;
  transition: all 0.3s ease;
}

.btn-icon-slide-right:hover .btn-text {
  transform: translateX(-10px);
}

.btn-icon-slide-right:hover .btn-icon {
  opacity: 1;
  transform: translateX(10px);
}

.btn-icon-slide-left {
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--bs-btn-padding-x) + 1rem) !important;
  padding-right: calc(var(--bs-btn-padding-x) + 1rem) !important;
}

.btn-icon-slide-left .btn-text {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-icon-slide-left .btn-icon {
  display: inline-block;
  margin-right: -16px;
  opacity: 0;
  transition: all 0.3s ease;
}

.btn-icon-slide-left:hover .btn-text {
  transform: translateX(10px);
}

.btn-icon-slide-left:hover .btn-icon {
  opacity: 1;
  transform: translateX(-10px);
}

.btn-icon-slide-up {
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--bs-btn-padding-x) + 1rem) !important;
  padding-right: calc(var(--bs-btn-padding-x) + 1rem) !important;
}

.btn-icon-slide-up .btn-text {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-icon-slide-up .btn-icon {
  display: inline-block;
  margin-left: -16px;
  opacity: 0;
  transition: all 0.3s ease;
}

.btn-icon-slide-up:hover .btn-text {
  transform: translateX(-10px);
}

.btn-icon-slide-up:hover .btn-icon {
  opacity: 1;
  transform: translateX(10px);
}

.btn-icon-slide-down {
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--bs-btn-padding-x) + 1rem) !important;
  padding-right: calc(var(--bs-btn-padding-x) + 1rem) !important;
}

.btn-icon-slide-down .btn-text {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-icon-slide-down .btn-icon {
  display: inline-block;
  margin-left: -16px;
  opacity: 0;
  transition: all 0.3s ease;
}

.btn-icon-slide-down:hover .btn-text {
  transform: translateX(-10px);
}

.btn-icon-slide-down:hover .btn-icon {
  opacity: 1;
  transform: translateX(10px);
}





/* 9.3 호버 테두리 효과 */
.btn-hover-border-animated {
  position: relative;
  overflow: hidden;
}

.btn-hover-border-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
  transition: left 0.5s ease;
}

.btn-hover-border-animated:hover::before {
  left: 100%;
}


/* ========================================
   9. 아이콘 위치 클래스
   ======================================== */

/* 9.1 기본 위치 */
.btn-icon-left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon-right {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.5rem;
}

.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

/* 9.2 간격 조정 */
.btn-icon-gap-sm {
  gap: 0.25rem;
}

.btn-icon-gap {
  gap: 0.5rem;
}

.btn-icon-gap-lg {
  gap: 0.75rem;
}

/* ========================================
   10. 언더라인 효과 (Ghost 버튼용)
   ======================================== */

/* 10.1 기본 언더라인 */
.btn-underline {
  text-decoration: underline !important;
}

.btn-hover-underline {
  transition: text-decoration 0.3s ease !important;
}

.btn-hover-underline:hover {
  text-decoration: underline !important;
}

/* 10.2 언더라인 스타일 */
.btn-underline-thin {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
}

.btn-underline-thick {
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
}

.btn-underline-gradient {
  position: relative;
  text-decoration: none !important;
}

.btn-underline-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary));
}

/* 10.2.1 그라디언트 → 단색 언더라인 */
.btn-underline-gradient-to-solid {
  position: relative;
  text-decoration: none !important;
}

.btn-underline-gradient-to-solid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary));
  transition: background 0.3s ease !important;
}

.btn-underline-gradient-to-solid:hover::after {
  background: var(--bs-primary) !important;
}

/* 10.2.2 단색 → 그라디언트 언더라인 */
.btn-underline-solid-to-gradient {
  position: relative;
  text-decoration: none !important;
}

.btn-underline-solid-to-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--bs-primary);
  transition: background 0.3s ease !important;
}

.btn-underline-solid-to-gradient:hover::after {
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary)) !important;
}

/* 10.3 언더라인 애니메이션 */
.btn-underline-expand {
  position: relative;
  text-decoration: none !important;
}

.btn-underline-expand::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.btn-underline-expand:hover::after {
  width: 100%;
}

.btn-underline-center {
  position: relative;
  text-decoration: none !important;
}

.btn-underline-center::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.btn-underline-center:hover::after {
  width: 100%;
}

.btn-underline-slide {
  position: relative;
  text-decoration: none !important;
}

.btn-underline-slide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: left 0.3s ease;
}

.btn-underline-slide:hover::after {
  left: 0;
}

/* ========================================
   12. 상태 클래스
   ======================================== */

/* 12.1 로딩 상태 */
.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.btn-loading-dots {
  position: relative;
  color: transparent !important;
}

.btn-loading-dots::after {
  content: '...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: currentColor;
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

.btn-loading-left::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.btn-loading-right::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ========================================
   13. 트랜지션 속도
   ======================================== */

/* 13.1 속도 조절 */
.btn-transition-fast {
  transition: all 0.15s ease !important;
}

.btn-transition {
  transition: all 0.3s ease !important;
}

.btn-transition-slow {
  transition: all 0.5s ease !important;
}

/* ========================================
   14. 소셜 미디어 버튼
   ======================================== */

/* 15.1 브랜드 색상 */
.btn-facebook {
  background-color: #1877f2 !important;
  border-color: #1877f2 !important;
  color: white !important;
}

.btn-facebook:hover {
  background-color: #166fe5 !important;
  border-color: #166fe5 !important;
  color: white !important;
}

.btn-twitter {
  background-color: #1da1f2 !important;
  border-color: #1da1f2 !important;
  color: white !important;
}

.btn-twitter:hover {
  background-color: #1a91da !important;
  border-color: #1a91da !important;
  color: white !important;
}

.btn-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border: none !important;
  color: white !important;
}

.btn-youtube {
  background-color: #ff0000 !important;
  border-color: #ff0000 !important;
  color: white !important;
}

.btn-youtube:hover {
  background-color: #e60000 !important;
  border-color: #e60000 !important;
  color: white !important;
}

.btn-linkedin {
  background-color: #0077b5 !important;
  border-color: #0077b5 !important;
  color: white !important;
}

.btn-linkedin:hover {
  background-color: #006ba1 !important;
  border-color: #006ba1 !important;
  color: white !important;
}

.btn-github {
  background-color: #333 !important;
  border-color: #333 !important;
  color: white !important;
}

.btn-github:hover {
  background-color: #2b2b2b !important;
  border-color: #2b2b2b !important;
  color: white !important;
}

.btn-kakao {
  background-color: #fee500 !important;
  border-color: #fee500 !important;
  color: #000 !important;
}

.btn-kakao:hover {
  background-color: #fdd835 !important;
  border-color: #fdd835 !important;
  color: #000 !important;
}

.btn-naver {
  background-color: #03c75a !important;
  border-color: #03c75a !important;
  color: white !important;
}

.btn-naver:hover {
  background-color: #02b351 !important;
  border-color: #02b351 !important;
  color: white !important;
}

/* ========================================
   16. 특수 버튼 타입
   ======================================== */

/* 16.1 플로팅 버튼 */
.btn-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.btn-fab-sm {
  width: 3rem;
  height: 3rem;
}

.btn-fab-lg {
  width: 4rem;
  height: 4rem;
}

.btn-fab-extended {
  width: auto;
  padding: 0 1.5rem;
  border-radius: 1.75rem !important;
  gap: 0.5rem;
}

/* 16.2 액션 버튼 */
.btn-play {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-play::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 1rem solid currentColor;
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  margin-left: 0.2rem;
}

.btn-download {
  position: relative;
}

.btn-download::before {
  content: '↓';
  margin-right: 0.5rem;
}

.btn-cart {
  position: relative;
}

.btn-cart::before {
  content: '🛒';
  margin-right: 0.5rem;
}

.btn-share {
  position: relative;
}

.btn-share::before {
  content: '↗';
  margin-right: 0.5rem;
}

/* ========================================
   17. 반응형 클래스
   ======================================== */

/* 17.1 크기 반응형 */
@media (min-width: 768px) {
  .btn-sm-md {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--bs-border-radius-sm);
  }
}

@media (min-width: 992px) {
  .btn-lg-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.5rem;
    border-radius: var(--bs-border-radius-lg);
  }
}

@media (max-width: 767.98px) {
  .btn-block-sm {
    width: 100% !important;
  }
}

/* ========================================
   유틸리티 클래스
   ======================================== */

/* 기본 트랜지션 및 패딩 조정 */
.btn {
  transition: all 0.3s ease;
  --bs-btn-padding-x: 1.5rem; /* 기본값 0.75rem의 2배 */
  --bs-btn-padding-y: 0.75rem; /* 기본값 0.375rem의 2배 */
  --bs-btn-border-radius: 0; /* 기본 border-radius를 0으로 설정 */
}

/* 포커스 상태 개선 */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* 비활성화 상태 */
.btn:disabled,
.btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn *,
  .btn::before,
  .btn::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    
  }
}