05Glowing highlighted plan

<main class="stage">
  <section class="plan is-demo">
    <span class="plan__badge">Recommended</span>
    <p class="plan__name">Pro</p>
    <p class="plan__price">$19/mo</p>
    <button class="plan__cta" type="button">Choose plan</button>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;      // 글로우 테두리가 숨 쉬는 한 주기
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-ink);

.plan {
  position: relative;
  width: clamp(180px, 60vw, 220px);
  border-radius: $r-card;
  background: $subject-ink;
  border: 2px solid $color;
  padding: $sp-8 $sp-6 $sp-6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: $sp-2;
  animation: planBreathe $duration $easing infinite;
}
.plan__badge {
  position: absolute;
  top: $sp-1 * -2;
  left: $sp-6;
  border-radius: $r-pill;
  background: $subject-blue-deep;
  color: $subject-cream;
  padding: $sp-1 $sp-3;
  font: 700 clamp(9.5px, 2.4vw, 11px)/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.plan__name {
  margin: 0;
  color: $subject-cream;
  font: 700 clamp(14px, 3.6vw, 17px)/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.plan__price {
  margin: 0;
  color: rgba($subject-cream, .7);
  font-weight: 600; font-size: clamp(11px, 2.8vw, 13px); line-height: 1;
}
.plan__cta {
  margin-top: $sp-2;
  border: 0;
  border-radius: $r-pill;
  background: $subject-blue-deep;
  color: $subject-cream;
  padding: $sp-2 $sp-5;
  font-weight: 600; font-size: clamp(11px, 2.8vw, 13px); line-height: 1;
}

@keyframes planBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba($color, .35), $shadow-raised; transform: scale(1); }
  50%      { box-shadow: 0 0 0 10px rgba($color, 0), $shadow-raised; transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .plan { animation: none !important; box-shadow: 0 0 0 4px rgba($color, .2), $shadow-raised; transform: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.plan {
  position: relative;
  width: clamp(180px, 60vw, 220px);
  border-radius: 16px;
  background: #17141a;
  border: 2px solid #2f6df6;
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  animation: planBreathe 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.plan__badge {
  position: absolute;
  top: -8px;
  left: 24px;
  border-radius: 999px;
  background: #0a4fe8;
  color: #fff7e6;
  padding: 4px 12px;
  font: 700 clamp(9.5px, 2.4vw, 11px)/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.plan__name {
  margin: 0;
  color: #fff7e6;
  font: 700 clamp(14px, 3.6vw, 17px)/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.plan__price {
  margin: 0;
  color: rgba(255, 247, 230, 0.7);
  font-weight: 600;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1;
}

.plan__cta {
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: #0a4fe8;
  color: #fff7e6;
  padding: 8px 20px;
  font-weight: 600;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1;
}

@keyframes planBreathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(47, 109, 246, 0.35), 0 14px 24px rgba(23, 20, 26, 0.32);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(47, 109, 246, 0), 0 14px 24px rgba(23, 20, 26, 0.32);
    transform: scale(1.015);
  }
}
@media (prefers-reduced-motion: reduce) {
  .plan {
    animation: none !important;
    box-shadow: 0 0 0 4px rgba(47, 109, 246, 0.2), 0 14px 24px rgba(23, 20, 26, 0.32);
    transform: none;
  }
}

import type { CSSProperties } from "react";
import styles from "./PricingLinear.module.scss";

export type PricingLinearProps = {
  badge?: string;
  name?: string;
  price?: string;
  cta?: string;
  /** 글로우 테두리가 숨 쉬는 한 주기(기본 2000ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function PricingLinear({
  badge = "추천",
  name = "프로",
  price = "$19/mo",
  cta = "선택하기",
  duration = 2000,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#2f6df6",
}: PricingLinearProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <section className={styles.plan} style={vars}>
      <span className={styles.badge}>{badge}</span>
      <p className={styles.name}>{name}</p>
      <p className={styles.price}>{price}</p>
      <button type="button" className={styles.cta}>{cta}</button>
    </section>
  );
}