/* ====== Dark Background CTA Buttons ====== */
.dark-btn-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  padding:18px;
  background:#0b0f14; /* 데모용 */
  border-radius:14px;
}

.btn-dark{
  --h: 48px;
  --r: 14px;
  --padx: 30px;
  --bg: rgba(255,255,255,0.08);
  --bd: rgba(255,255,255,0.14);
  --txt: rgba(255,255,255,0.92);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);

  height: var(--h);
  padding: 0 var(--padx);
  border-radius: 50px; 
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  color: var(--txt);
  text-decoration:none;
 
  background: var(--bg);
  border: 1px solid var(--bd);
  box-shadow: var(--shadow);

  transform: translateY(0);
  transition: 
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.btn-dark:focus{
  outline: none;
}

.btn-dark:focus-visible{
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.35), var(--shadow);
}

.btn-dark:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

.btn-dark:active{
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(0,0,0,0.38);
}

/* Primary: 깔끔한 그라데이션 포인트 */
.btn-dark.primary{
  background: linear-gradient(135deg, rgba(90,153,255,0.95), rgba(150,90,255,0.95));
  border-color: rgba(255,255,255,0.18);
}

.btn-dark.primary:hover{
  background: linear-gradient(135deg, rgba(110,170,255,1), rgba(170,110,255,1));
}

/* Outline: 검정배경에서 가장 범용 */
.btn-dark.outline{
  background: transparent;
  border-color: rgba(255,255,255,0.32);
}

.btn-dark.outline:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
}

/* Glass: 유리 질감 */
.btn-dark.glass{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
}

/* Glow: 강조용 (과하지 않게) */
.btn-dark.glow{
  background: rgba(255,255,255,0.08);
  border-color: rgba(130,200,255,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 28px rgba(90,153,255,0.25);
}

.btn-dark.glow:hover{
  border-color: rgba(180,140,255,0.55);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 34px rgba(170,110,255,0.28);
}

/* Icon button arrow */
.btn-dark.icon .arrow{
  width:18px;
  height:18px;
  opacity:0.9;
  transition: transform .16s ease, opacity .16s ease;
}

.btn-dark.icon:hover .arrow{
  transform: translateX(2px);
  opacity:1;
}