01Countdown hero

<main class="stage">
  <section class="ph">
    <span class="ph__blob ph__blob--a" aria-hidden="true"></span>
    <span class="ph__blob ph__blob--b" aria-hidden="true"></span>
    <div class="ph__text">
      <p class="ph__eyebrow">Launch promo</p>
      <h1 class="ph__title">Early bird 30% off</h1>
      <p class="ph__sub">Price returns to normal after this</p>
    </div>
    <div class="ph__panel">
      <div class="ph__row" role="timer" aria-live="off">
        <div class="ph__unit"><span class="ph__num" data-u="d">02</span><span class="ph__unit-label">Days</span></div>
        <span class="ph__sep">:</span>
        <div class="ph__unit"><span class="ph__num" data-u="h">14</span><span class="ph__unit-label">Hrs</span></div>
        <span class="ph__sep">:</span>
        <div class="ph__unit"><span class="ph__num" data-u="m">36</span><span class="ph__unit-label">Min</span></div>
        <span class="ph__sep">:</span>
        <div class="ph__unit"><span class="ph__num ph__num--s" data-u="s">09</span><span class="ph__unit-label">Sec</span></div>
      </div>
      <button type="button" class="ph__cta" aria-pressed="false">Join now</button>
    </div>
  </section>
</main>

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

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-quick;                                // CTA 눌림 전환
$easing: $ease-pop;
$color: $subject-blue;                                 // 강조색

@include stage($stage-ink);

.ph {
  position: relative;
  box-sizing: border-box;                           // width 에 패딩을 포함 — 아니면 320px 에서 패딩만큼 넘친다(실측 2026-09-10)
  width: min(420px, 96vw);
  display: flex;
  flex-direction: column;
  gap: $sp-4;
  padding: $sp-5;
  border-radius: $r-card;
  background: linear-gradient(135deg, rgba(47, 109, 246, .16), rgba(23, 20, 26, 0));
  isolation: isolate;
  overflow: hidden;
}
.ph__blob {
  position: absolute;
  z-index: -1;
  border-radius: $r-pill;
  animation: ph-drift 3.4s ease-in-out infinite;
}
.ph__blob--a { width: 120px; height: 120px; left: -30px; top: -30px; background: rgba(47, 109, 246, .35); }
.ph__blob--b { width: 90px; height: 90px; right: -20px; bottom: -24px; background: rgba(255, 210, 63, .28); animation-delay: -1.6s; }
@keyframes ph-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .7; }
  50%      { transform: translate(6px, -8px) scale(1.12); opacity: 1; }
}

.ph__text { display: flex; flex-direction: column; gap: $sp-1; }
.ph__eyebrow { margin: 0; font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; color: $subject-cream; }   // 어두운 패널 위 — AA 4.5 (파랑은 이 면에서 2.63:1)
.ph__title { margin: 0; font-weight: 800; font-size: clamp(17px, 5vw, 21px); line-height: 1.15; font-family: inherit; color: $subject-cream; }
.ph__sub { margin: 0; font-weight: 500; font-size: 12px; line-height: 1.4; font-family: inherit; color: rgba(255, 247, 230, .65); }

.ph__panel { display: flex; align-items: center; justify-content: space-between; gap: $sp-3; flex-wrap: wrap; }
.ph__row { display: flex; align-items: center; gap: $sp-2; }
.ph__unit { display: flex; flex-direction: column; align-items: center; gap: $sp-1; }
.ph__num {
  display: block;
  min-width: 32px;
  padding: $sp-1;
  border-radius: $r-sm;
  background: rgba(255, 247, 230, .1);
  color: $subject-cream;
  font: 800 15px/1 "Space Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.ph__num--s { background: rgba(47, 109, 246, .26); animation: ph-tick 1s $easing infinite; transform-origin: center; }
@keyframes ph-tick {
  0%, 55%  { transform: translateY(0) scale(1); }
  78%      { transform: translateY(-3px) scale(1.1); }
  100%     { transform: translateY(0) scale(1); }
}
.ph__unit-label { font-weight: 600; font-size: 8px; line-height: 1; font-family: inherit; color: rgba(255, 247, 230, .5); }
.ph__sep { font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; color: rgba(255, 247, 230, .6); margin-top: -$sp-3; }   // AA 4.5 — .3 은 2.61:1

.ph__cta {
  border: 0;
  cursor: pointer;
  padding: $sp-2 $sp-4;
  border-radius: $r-control;
  background: $subject-blue-deep;
  color: $subject-cream;
  font-weight: 700; font-size: 12px; line-height: 1; font-family: inherit;
  transition: transform $duration $easing, background $duration $easing;
}
.ph__cta[aria-pressed="true"] { background: #6c81b6; transform: scale(.96); }
.ph__cta:hover { transform: translateY(-1px); }

// ── 접근성 ──────────────────────────────────────────
@media (prefers-reduced-motion: reduce) {
  .ph__blob, .ph__num--s { animation: none !important; }
  .ph__cta { transition: none !important; }
}

// ── 반응형(320×200) ──────────────────────────────────
@media (max-width: 340px), (max-height: 220px) {
  .ph__sub, .ph__eyebrow, .ph__unit-label { display: none; }
  .ph { padding: $sp-3; gap: $sp-2; }
  .ph__panel { flex-direction: column; align-items: stretch; gap: $sp-2; }
  .ph__row { justify-content: center; }
  .ph__num { min-width: 24px; padding: $sp-1; font-size: 12px; }
  .ph__cta { padding: $sp-1 $sp-3; }
}

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);
}

.ph {
  position: relative;
  box-sizing: border-box;
  width: min(420px, 96vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47, 109, 246, 0.16), rgba(23, 20, 26, 0));
  isolation: isolate;
  overflow: hidden;
}

.ph__blob {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  animation: ph-drift 3.4s ease-in-out infinite;
}

.ph__blob--a {
  width: 120px;
  height: 120px;
  left: -30px;
  top: -30px;
  background: rgba(47, 109, 246, 0.35);
}

.ph__blob--b {
  width: 90px;
  height: 90px;
  right: -20px;
  bottom: -24px;
  background: rgba(255, 210, 63, 0.28);
  animation-delay: -1.6s;
}

@keyframes ph-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(6px, -8px) scale(1.12);
    opacity: 1;
  }
}
.ph__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ph__eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  font-family: inherit;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff7e6;
}

.ph__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(17px, 5vw, 21px);
  line-height: 1.15;
  font-family: inherit;
  color: #fff7e6;
}

.ph__sub {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  font-family: inherit;
  color: rgba(255, 247, 230, 0.65);
}

.ph__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ph__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ph__num {
  display: block;
  min-width: 32px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 247, 230, 0.1);
  color: #fff7e6;
  font: 800 15px/1 "Space Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.ph__num--s {
  background: rgba(47, 109, 246, 0.26);
  animation: ph-tick 1s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
  transform-origin: center;
}

@keyframes ph-tick {
  0%, 55% {
    transform: translateY(0) scale(1);
  }
  78% {
    transform: translateY(-3px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.ph__unit-label {
  font-weight: 600;
  font-size: 8px;
  line-height: 1;
  font-family: inherit;
  color: rgba(255, 247, 230, 0.5);
}

.ph__sep {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  color: rgba(255, 247, 230, 0.6);
  margin-top: -12px;
}

.ph__cta {
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 12px;
  background: #0a4fe8;
  color: #fff7e6;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1), background 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.ph__cta[aria-pressed=true] {
  background: #6c81b6;
  transform: scale(0.96);
}

.ph__cta:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ph__blob, .ph__num--s {
    animation: none !important;
  }
  .ph__cta {
    transition: none !important;
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .ph__sub, .ph__eyebrow, .ph__unit-label {
    display: none;
  }
  .ph {
    padding: 12px;
    gap: 8px;
  }
  .ph__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .ph__row {
    justify-content: center;
  }
  .ph__num {
    min-width: 24px;
    padding: 4px;
    font-size: 12px;
  }
  .ph__cta {
    padding: 4px 12px;
  }
}

// 실제 동작: 목표 시각(지금부터 정확히 2Days 14시간 36Min 9Sec 뒤)까지 1초마다 실제로 줄어든다.
var target = Date.now() + ((2 * 24 * 60 * 60) + (14 * 60 * 60) + (36 * 60) + 9) * 1000;
var els = {
  d: document.querySelector('[data-u="d"]'),
  h: document.querySelector('[data-u="h"]'),
  m: document.querySelector('[data-u="m"]'),
  s: document.querySelector('[data-u="s"]')
};
function pad(n) { return String(Math.max(0, n)).padStart(2, '0'); }
function tick() {
  var diff = Math.max(0, target - Date.now());
  var s = Math.floor(diff / 1000);
  els.d.textContent = pad(Math.floor(s / 86400));
  els.h.textContent = pad(Math.floor((s % 86400) / 3600));
  els.m.textContent = pad(Math.floor((s % 3600) / 60));
  els.s.textContent = pad(s % 60);
}
tick();
setInterval(tick, 1000);
var cta = document.querySelector('.ph__cta');
cta.addEventListener('click', function () {
  var on = cta.getAttribute('aria-pressed') === 'true';
  cta.setAttribute('aria-pressed', String(!on));
  cta.textContent = on ? 'Join now' : 'Joined ✓';
});

import { useEffect, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./PromoCountdownHero.module.scss";

function pad(n: number) {
  return String(Math.max(0, n)).padStart(2, "0");
}

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

export default function PromoCountdownHero({
  duration = 220,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#2f6df6",
  targetMs = Date.now() + ((2 * 24 * 60 * 60) + (14 * 60 * 60) + (36 * 60) + 9) * 1000,
}: PromoCountdownHeroProps) {
  const [left, setLeft] = useState(Math.max(0, targetMs - Date.now()));
  const [pressed, setPressed] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  useEffect(() => {
    const id = setInterval(() => setLeft(Math.max(0, targetMs - Date.now())), 1000);
    return () => clearInterval(id);
  }, [targetMs]);

  const s = Math.floor(left / 1000);
  const d = Math.floor(s / 86400);
  const h = Math.floor((s % 86400) / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = s % 60;

  return (
    <section className={styles.ph} style={vars}>
      <span className={`${styles.blob} ${styles.blobA}`} aria-hidden="true" />
      <span className={`${styles.blob} ${styles.blobB}`} aria-hidden="true" />
      <div className={styles.text}>
        <p className={styles.eyebrow}>런칭 프로모션</p>
        <h1 className={styles.title}>얼리버드 30% 할인</h1>
        <p className={styles.sub}>이 시간 이후 정가로 돌아갑니다</p>
      </div>
      <div className={styles.panel}>
        <div className={styles.row} role="timer" aria-live="off">
          <div className={styles.unit}><span className={styles.num}>{pad(d)}</span><span className={styles.unitLabel}>일</span></div>
          <span className={styles.sep}>:</span>
          <div className={styles.unit}><span className={styles.num}>{pad(h)}</span><span className={styles.unitLabel}>시</span></div>
          <span className={styles.sep}>:</span>
          <div className={styles.unit}><span className={styles.num}>{pad(m)}</span><span className={styles.unitLabel}>분</span></div>
          <span className={styles.sep}>:</span>
          <div className={styles.unit}><span className={`${styles.num} ${styles.numS}`}>{pad(sec)}</span><span className={styles.unitLabel}>초</span></div>
        </div>
        <button
          type="button"
          className={styles.cta}
          aria-pressed={pressed}
          onClick={() => setPressed((v) => !v)}
        >
          {pressed ? "참여 완료 ✓" : "지금 참여하기"}
        </button>
      </div>
    </section>
  );
}