08カードの移動で長さが決まる進捗リング

<main class="stage">
<div class="kb is-demo" id="kb"><div class="kb__row"><div class="kb__board" data-role="board"><div class="kb__track" data-role="track"><div class="kb__col" data-role="col"><div class="kb__head"><span class="kb__name">残り</span></div></div><div class="kb__col" data-role="col"><div class="kb__head"><span class="kb__name">完了</span></div></div><button class="kb__card" type="button" data-role="card" data-tone="0"><span class="kb__label" data-role="label">ログイン画面</span></button><button class="kb__card" type="button" data-role="card" data-tone="1"><span class="kb__label" data-role="label">決済連携</span></button><button class="kb__card" type="button" data-role="card" data-tone="2"><span class="kb__label" data-role="label">通知設定</span></button><button class="kb__card" type="button" data-role="card" data-tone="3"><span class="kb__label" data-role="label">検索フィルター</span></button></div><div class="kb__cursor" data-role="cursor"></div></div><div class="kb__ringbox"><div class="kb__dial"><svg viewBox="0 0 64 64" width="64" height="64" aria-hidden="true"><circle class="kb__arc kb__arc--bg" cx="32" cy="32" r="24"></circle><circle class="kb__arc kb__arc--a" data-role="arc-a" cx="32" cy="32" r="24"></circle><circle class="kb__arc kb__arc--b" data-role="arc-b" cx="32" cy="32" r="24"></circle></svg><span class="kb__pct" data-role="pct"></span></div><span class="kb__ringname">進捗</span><span class="kb__ringdone" data-role="done"></span></div></div><p class="kb__meta" data-role="meta"></p></div>
</main>

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

// 핵심: 완료 열 카드 수 ÷ 전체 카드 수로 호의 길이를 구하고 목표가 바뀌면 보간한다.
// 좌표는 JS 가 계산해 transform 으로만 넣는다. 열·카드 크기는 화면 높이에 맞춘 4px 격자 한 단위(U)에서 나온다.

$bg: $stage-ink;
$panel: $tick-panel;
$text: $stage-paper;
$mute: rgba($stage-paper, .78);
$ring: $stage-paper;

@include stage($bg);

.kb {
  width: min(100%, 440px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: $sp-2;
  position: relative;
}

.kb__board {
  position: relative;
  
}
.kb__track { position: absolute; inset: 0; will-change: transform; }

.kb__col {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  border-radius: $r-sm;
  background: $panel;
  overflow: hidden;
}
.kb__head {
  position: relative;
  box-sizing: border-box;
  height: var(--head, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $sp-2;
  padding: 0 $sp-2;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: $text;
}
.kb__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb__count { font-variant-numeric: tabular-nums; color: $mute; font-weight: 600; }

.kb__card {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  gap: $sp-1;
  padding: 0 $sp-2;
  border: 0;
  border-radius: $r-xs;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  color: $subject-ink;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  box-shadow: 0 calc(var(--lift-px, 0px) * .5) var(--lift-px, 0px) rgba($stage-ink, .4), 0 1px 0 rgba($stage-ink, .14);
}
.kb__card[data-tone="0"] { background: $subject-lilac; }
.kb__card[data-tone="1"] { background: $subject-sky; }
.kb__card[data-tone="2"] { background: $subject-mint; }
.kb__card[data-tone="3"] { background: $subject-pink; }
.kb__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb__card:focus-visible,
.kb__card.is-focus { outline: var(--focus-ring, 2px) solid $ring; outline-offset: 2px; }
.is-held { z-index: 4; cursor: grabbing; }

.kb__ghost {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 2px dashed rgba($ring, .6);
  border-radius: $r-xs;
  opacity: 0;
  pointer-events: none;
}
.kb__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  box-sizing: border-box;
  border: 2px solid $ring;
  border-radius: 50%;
  background: rgba($ring, .16);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.kb__meta {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: $mute;
  font-variant-numeric: tabular-nums;
}

.kb__row { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: $sp-2; }
.kb__ringbox {
  box-sizing: border-box;
  border-radius: $r-sm;
  background: $panel;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $sp-1;
  color: $text;
  font-size: 12px;
  line-height: 16px;
}
.kb__dial { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.kb__dial svg { position: absolute; inset: 0; }
.kb__arc { fill: none; stroke-width: 8; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.kb__arc--bg { stroke: rgba($stage-paper, .14); }
.kb__arc--a { stroke: $subject-sky; }
.kb__arc--b { stroke: $subject-mint; opacity: 0; }
.kb__pct { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; }
.kb__ringname { color: $mute; }
.kb__ringdone { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-height: 259px) {
  .kb__head, .kb__card { font-size: 11px; }
}
@media (max-width: 340px) {
  .kb__card { padding: 0 $sp-1; }
}
@media (prefers-reduced-motion: reduce) {
  .kb__card, .kb__track, .kb__ghost { transition: none; animation: none; }
  .kb__cursor { display: 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);
}

.kb {
  width: min(100%, 440px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  position: relative;
}

.kb__board {
  position: relative;
}

.kb__track {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.kb__col {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  border-radius: 8px;
  background: #231f28;
  overflow: hidden;
}

.kb__head {
  position: relative;
  box-sizing: border-box;
  height: var(--head, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: #ffffff;
}

.kb__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb__count {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.kb__card {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  color: #17141a;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  box-shadow: 0 calc(var(--lift-px, 0px) * 0.5) var(--lift-px, 0px) rgba(23, 20, 26, 0.4), 0 1px 0 rgba(23, 20, 26, 0.14);
}

.kb__card[data-tone="0"] {
  background: #b9a0ff;
}

.kb__card[data-tone="1"] {
  background: #6ec8ff;
}

.kb__card[data-tone="2"] {
  background: #4cd4a6;
}

.kb__card[data-tone="3"] {
  background: #ff9ebb;
}

.kb__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb__card:focus-visible,
.kb__card.is-focus {
  outline: var(--focus-ring, 2px) solid #ffffff;
  outline-offset: 2px;
}

.is-held {
  z-index: 4;
  cursor: grabbing;
}

.kb__ghost {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
}

.kb__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.kb__meta {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}

.kb__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 8px;
}

.kb__ringbox {
  box-sizing: border-box;
  border-radius: 8px;
  background: #231f28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
}

.kb__dial {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}

.kb__dial svg {
  position: absolute;
  inset: 0;
}

.kb__arc {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

.kb__arc--bg {
  stroke: rgba(255, 255, 255, 0.14);
}

.kb__arc--a {
  stroke: #6ec8ff;
}

.kb__arc--b {
  stroke: #4cd4a6;
  opacity: 0;
}

.kb__pct {
  position: relative;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kb__ringname {
  color: rgba(255, 255, 255, 0.78);
}

.kb__ringdone {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-height: 259px) {
  .kb__head, .kb__card {
    font-size: 11px;
  }
}
@media (max-width: 340px) {
  .kb__card {
    padding: 0 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kb__card, .kb__track, .kb__ghost {
    transition: none;
    animation: none;
  }
  .kb__cursor {
    display: none;
  }
}

(function () {

  var root = document.getElementById('kb');
  var CLS = { demo: 'is-demo', held: 'is-held' };
  var off = [];
  var raf = 0;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function q(sel) {
    return root.querySelector(sel);
  }
  function qa(sel) {
    return Array.prototype.slice.call(root.querySelectorAll(sel));
  }
  function on(target, type, fn) {
    target.addEventListener(type, fn);
    off.push(function () { target.removeEventListener(type, fn); });
  }
  function clamp(v, lo, hi) {
    return Math.max(lo, Math.min(hi, v));
  }

  // 칸 크기는 화면 높이에 맞춰 U(4 또는 6) 한 단위로 정한다
  var U = 4;
  var CARD_H = 24;
  var STEP = 28;
  var HEAD = 20;
  var PAD = 4;
  var GAP = 8;
  var onUnit = function () { };
  function setUnit() {
    U = window.innerHeight >= 260 ? 6 : 4;
    CARD_H = 6 * U;
    STEP = 7 * U;
    HEAD = 5 * U;
    PAD = U;
    GAP = 2 * PAD;
    onUnit();
  }
  var CYCLE_MS = 2000;

  var board = q('[data-role="board"]');
  var cursorEl = q('[data-role="cursor"]');
  var metaEl = q('[data-role="meta"]');
  var colEls = qa('[data-role="col"]');
  var COLS = colEls.length;
  var boardW = 0;
  var boardH = 0;
  var colW = 0;
  var cols = [];
  var cards = qa('[data-role="card"]').map(function (el, i) {
    return { el: el, i: i, x: 0, y: 0, vx: 0, vy: 0, rot: 0, sc: 1, lift: 0 };
  });
  var demo = !reduce;
  var nowMs = 0;
  var lastMeta = '';
  var onStop = function () { };
  var afterStep = function (dt) { };
  var extraSettle = function () { };

  function slotX(c) {
    return c * (colW + GAP) + PAD;
  }
  function slotY(r) {
    return HEAD + 2 * PAD + r * STEP;
  }
  function measure() {
    setUnit();
    boardW = board.clientWidth;
    colW = FIXED_COL > 0 ? FIXED_COL : (boardW - GAP * (COLS - 1)) / COLS;
    boardH = slotY(ROWS - 1) + CARD_H + PAD;
    board.style.height = boardH + 'px';
    board.style.setProperty('--head', HEAD + 'px');
    colEls.forEach(function (el, c) {
      el.style.left = c * (colW + GAP) + 'px';
      el.style.width = colW + 'px';
      el.style.height = boardH + 'px';
    });
    cards.forEach(function (c) {
      c.el.style.width = (colW - 2 * PAD) + 'px';
      c.el.style.height = CARD_H + 'px';
    });
  }
  function locate(i) {
    for (var c = 0; c < cols.length; c++) {
      var r = cols[c].indexOf(i);
      if (r >= 0) return { c: c, r: r };
    }
    return { c: 0, r: 0 };
  }
  function spring(c, tx, ty, k, d, dt) {
    c.vx += (k * (tx - c.x) - d * c.vx) * dt;
    c.x += c.vx * dt;
    c.vy += (k * (ty - c.y) - d * c.vy) * dt;
    c.y += c.vy * dt;
  }
  function draw() {
    cards.forEach(function (c) {
      c.el.style.transform = 'translate3d(' + c.x.toFixed(2) + 'px,' + c.y.toFixed(2) + 'px,0) rotate(' + c.rot.toFixed(2) + 'deg) scale(' + c.sc.toFixed(3) + ')';
    });
  }
  function cardAt(t) {
    var n = t;
    while (n && n !== board) {
      for (var k = 0; k < cards.length; k++) {
        if (cards[k].el === n) return cards[k];
      }
      n = n.parentElement;
    }
    return null;
  }
  function showCursor(p) {
    if (!p) { cursorEl.style.opacity = '0'; return; }
    cursorEl.style.opacity = '1';
    cursorEl.style.transform = 'translate3d(' + p.x.toFixed(1) + 'px,' + p.y.toFixed(1) + 'px,0)';
  }
  // keys: [시각 ms, x, y] 목록. 키 사이는 smoothstep 으로 잇는다
  function keyAt(t, keys) {
    var i = 0;
    while (i < keys.length - 2 && t > keys[i + 1][0]) i++;
    var a = keys[i];
    var b = keys[i + 1];
    var u = clamp((t - a[0]) / (b[0] - a[0]), 0, 1);
    u = u * u * (3 - 2 * u);
    return { x: a[1] + (b[1] - a[1]) * u, y: a[2] + (b[2] - a[2]) * u };
  }
  // 열·행 소수 좌표를 보드 픽셀로 바꾼다 (행 r 의 카드 중심선이 소수 r)
  function pathPoint(t, keys) {
    var k = keyAt(t, keys);
    return { x: k.x * (colW + GAP) + colW / 2, y: slotY(0) + k.y * STEP + CARD_H / 2 };
  }
  function settleNow() {
    cards.forEach(function (c) {
      var t = targetOf(c);
      c.x = t.x; c.y = t.y; c.vx = 0; c.vy = 0; c.rot = 0; c.sc = 1; c.lift = 0;
    });
    extraSettle();
  }
  // reduce: 보간 없이 입력 직후 목표 위치를 바로 그린다
  function sync() {
    if (!reduce) return;
    settleNow();
    draw();
    report();
  }
  function report() {
    var m = metaText();
    if (m !== lastMeta) { lastMeta = m; metaEl.textContent = m; }
  }
  function stopDemo() {
    if (!demo) return;
    demo = false;
    root.classList.remove(CLS.demo);
    showCursor(null);
    onStop();
  }
  function settleClass(c, h) {
    if (c.el.classList.contains(CLS.held) && Math.abs(c.x - h.x) + Math.abs(c.y - h.y) < 1.5 && Math.abs(c.vx) + Math.abs(c.vy) < 30) {
      c.el.classList.remove(CLS.held);
    }
  }
  var t0 = -1;
  var lastTs = 0;
  var prevT = 0;
  function frame(ts) {
    if (t0 < 0) { t0 = ts; lastTs = ts; }
    var dt = clamp((ts - lastTs) / 1000, 0.001, 0.033);
    lastTs = ts;
    nowMs = ts;
    var t = (ts - t0) % CYCLE_MS;
    if (demo) {
      if (t < prevT) demoReset();
      demoAt(t);
    }
    prevT = t;
    cards.forEach(function (c) { stepCard(c, dt); });
    afterStep(dt);
    draw();
    report();
    raf = requestAnimationFrame(frame);
  }
  function boot() {
    measure();
    cols = initialCols();
    settleNow();
    draw();
    report();
    on(window, 'resize', function () { measure(); settleNow(); draw(); });
    if (reduce) {
      root.classList.remove(CLS.demo);
    } else {
      raf = requestAnimationFrame(frame);
    }
  }

  var RING_RADIUS = 24;
  var RING_LERP = 0.12;
  var DONE_COLUMN = 1;
  var ARC_START = -90;
  var ROWS = 4;
  var FIXED_COL = 0;
  var CIRC = 2 * Math.PI * RING_RADIUS;
  var arcA = q('[data-role="arc-a"]');
  var arcB = q('[data-role="arc-b"]');
  var pctEl = q('[data-role="pct"]');
  var doneEl = q('[data-role="done"]');
  var ring = 0;
  var MOVES = [[250, 0], [650, 1], [1050, 2], [1450, 3]];
  var demoN = 0;
  [arcA, arcB].forEach(function (a) {
    a.setAttribute('r', String(RING_RADIUS));
    a.style.strokeDasharray = CIRC.toFixed(2);
    a.style.transform = 'rotate(' + ARC_START + 'deg)';
  });

  function initialCols() {
    return [[0, 1, 2], [3]];
  }
  function targetOf(c) {
    var s = locate(c.i);
    return { x: slotX(s.c), y: slotY(s.r) };
  }
  function toggleCard(c) {
    var s = locate(c.i);
    cols[s.c].splice(s.r, 1);
    cols[1 - s.c].push(c.i);
  }
  function stepCard(c, dt) {
    var h = targetOf(c);
    spring(c, h.x, h.y, 170, 21, dt);
  }
  // 핵심: 호의 길이 = 完了 열 카드 수 ÷ 전체 카드 수. 목표가 바뀌면 RING_LERP 만큼씩 따라간다
  function goal() {
    return cols[DONE_COLUMN].length / cards.length;
  }
  function paintRing() {
    var rest = CIRC * (1 - ring);
    arcA.style.strokeDashoffset = rest.toFixed(2);
    arcB.style.strokeDashoffset = rest.toFixed(2);
    arcB.style.opacity = (ring * ring).toFixed(3);
    pctEl.textContent = Math.round(ring * 100) + '%';
    doneEl.textContent = cols[DONE_COLUMN].length + '/' + cards.length;
  }
  afterStep = function (dt) {
    ring += (goal() - ring) * (1 - Math.pow(1 - RING_LERP, dt * 60));
    paintRing();
  };
  extraSettle = function () {
    ring = goal();
    paintRing();
  };
  on(board, 'click', function (e) {
    var c = cardAt(e.target);
    if (!c) return;
    stopDemo();
    toggleCard(c);
    sync();
  });
  function demoAt(t) {
    while (demoN < MOVES.length && t >= MOVES[demoN][0]) {
      toggleCard(cards[MOVES[demoN][1]]);
      demoN++;
    }
  }
  function demoReset() {
    demoN = 0;
    cols = initialCols();
  }
  function metaText() {
    return 'RING_LERP ' + RING_LERP + ' · arc ' + (ring * 360).toFixed(0) + ' deg';
  }

  boot();

})();

// ProgressRing — vanilla 판(kbn-progress-ring-from-columns) 의 React 포트. 완료 열 카드 수 ÷ 전체 카드 수로 호의 길이를 구하고 목표가 바뀌면 보간한다.
// 소스는 vanilla 와 같은 구조(공용 엔진 + 장면 코드)이고 정식 타입을 단다.
import { useEffect, useRef } from "react";
import styles from "./ProgressRing.module.scss";

export default function ProgressRing() {
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const rootEl = rootRef.current;
    if (!rootEl) return;
    type Off = () => void;
    type Step = (dt: number) => void;
    type Card = { el: HTMLElement; i: number; x: number; y: number; vx: number; vy: number; rot: number; sc: number; lift: number };
    type Pt = { x: number; y: number };
    type Slot = { c: number; r: number };

    var root: HTMLElement = rootEl;
    var CLS = { demo: styles["is-demo"], held: styles["is-held"] };
    var off: Off[] = [];
    var raf = 0;
    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function q(sel: string): HTMLElement {
      return root.querySelector(sel) as HTMLElement;
    }
    function qa(sel: string): HTMLElement[] {
      return Array.prototype.slice.call(root.querySelectorAll(sel)) as HTMLElement[];
    }
    function on(target: EventTarget, type: string, fn: EventListener): void {
      target.addEventListener(type, fn);
      off.push(function () { target.removeEventListener(type, fn); });
    }
    function clamp(v: number, lo: number, hi: number): number {
      return Math.max(lo, Math.min(hi, v));
    }

    // 칸 크기는 화면 높이에 맞춰 U(4 또는 6) 한 단위로 정한다
    var U = 4;
    var CARD_H = 24;
    var STEP = 28;
    var HEAD = 20;
    var PAD = 4;
    var GAP = 8;
    var onUnit: Off = function () { };
    function setUnit(): void {
      U = window.innerHeight >= 260 ? 6 : 4;
      CARD_H = 6 * U;
      STEP = 7 * U;
      HEAD = 5 * U;
      PAD = U;
      GAP = 2 * PAD;
      onUnit();
    }
    var CYCLE_MS = 2000;

    var board = q('[data-role="board"]');
    var cursorEl = q('[data-role="cursor"]');
    var metaEl = q('[data-role="meta"]');
    var colEls = qa('[data-role="col"]');
    var COLS = colEls.length;
    var boardW = 0;
    var boardH = 0;
    var colW = 0;
    var cols: number[][] = [];
    var cards: Card[] = qa('[data-role="card"]').map(function (el: HTMLElement, i: number): Card {
      return { el: el, i: i, x: 0, y: 0, vx: 0, vy: 0, rot: 0, sc: 1, lift: 0 };
    });
    var demo = !reduce;
    var nowMs = 0;
    var lastMeta = '';
    var onStop: Off = function () { };
    var afterStep: Step = function (dt: number) { };
    var extraSettle: Off = function () { };

    function slotX(c: number): number {
      return c * (colW + GAP) + PAD;
    }
    function slotY(r: number): number {
      return HEAD + 2 * PAD + r * STEP;
    }
    function measure(): void {
      setUnit();
      boardW = board.clientWidth;
      colW = FIXED_COL > 0 ? FIXED_COL : (boardW - GAP * (COLS - 1)) / COLS;
      boardH = slotY(ROWS - 1) + CARD_H + PAD;
      board.style.height = boardH + 'px';
      board.style.setProperty('--head', HEAD + 'px');
      colEls.forEach(function (el: HTMLElement, c: number) {
        el.style.left = c * (colW + GAP) + 'px';
        el.style.width = colW + 'px';
        el.style.height = boardH + 'px';
      });
      cards.forEach(function (c: Card) {
        c.el.style.width = (colW - 2 * PAD) + 'px';
        c.el.style.height = CARD_H + 'px';
      });
    }
    function locate(i: number): Slot {
      for (var c = 0; c < cols.length; c++) {
        var r = cols[c].indexOf(i);
        if (r >= 0) return { c: c, r: r };
      }
      return { c: 0, r: 0 };
    }
    function spring(c: Card, tx: number, ty: number, k: number, d: number, dt: number): void {
      c.vx += (k * (tx - c.x) - d * c.vx) * dt;
      c.x += c.vx * dt;
      c.vy += (k * (ty - c.y) - d * c.vy) * dt;
      c.y += c.vy * dt;
    }
    function draw(): void {
      cards.forEach(function (c: Card) {
        c.el.style.transform = 'translate3d(' + c.x.toFixed(2) + 'px,' + c.y.toFixed(2) + 'px,0) rotate(' + c.rot.toFixed(2) + 'deg) scale(' + c.sc.toFixed(3) + ')';
      });
    }
    function cardAt(t: EventTarget | null): Card | null {
      var n = t as HTMLElement | null;
      while (n && n !== board) {
        for (var k = 0; k < cards.length; k++) {
          if (cards[k].el === n) return cards[k];
        }
        n = n.parentElement;
      }
      return null;
    }
    function showCursor(p: Pt | null): void {
      if (!p) { cursorEl.style.opacity = '0'; return; }
      cursorEl.style.opacity = '1';
      cursorEl.style.transform = 'translate3d(' + p.x.toFixed(1) + 'px,' + p.y.toFixed(1) + 'px,0)';
    }
    // keys: [시각 ms, x, y] 목록. 키 사이는 smoothstep 으로 잇는다
    function keyAt(t: number, keys: number[][]): Pt {
      var i = 0;
      while (i < keys.length - 2 && t > keys[i + 1][0]) i++;
      var a = keys[i];
      var b = keys[i + 1];
      var u = clamp((t - a[0]) / (b[0] - a[0]), 0, 1);
      u = u * u * (3 - 2 * u);
      return { x: a[1] + (b[1] - a[1]) * u, y: a[2] + (b[2] - a[2]) * u };
    }
    // 열·행 소수 좌표를 보드 픽셀로 바꾼다 (행 r 의 카드 중심선이 소수 r)
    function pathPoint(t: number, keys: number[][]): Pt {
      var k = keyAt(t, keys);
      return { x: k.x * (colW + GAP) + colW / 2, y: slotY(0) + k.y * STEP + CARD_H / 2 };
    }
    function settleNow(): void {
      cards.forEach(function (c: Card) {
        var t = targetOf(c);
        c.x = t.x; c.y = t.y; c.vx = 0; c.vy = 0; c.rot = 0; c.sc = 1; c.lift = 0;
      });
      extraSettle();
    }
    // reduce: 보간 없이 입력 직후 목표 위치를 바로 그린다
    function sync(): void {
      if (!reduce) return;
      settleNow();
      draw();
      report();
    }
    function report(): void {
      var m = metaText();
      if (m !== lastMeta) { lastMeta = m; metaEl.textContent = m; }
    }
    function stopDemo(): void {
      if (!demo) return;
      demo = false;
      root.classList.remove(CLS.demo);
      showCursor(null);
      onStop();
    }
    function settleClass(c: Card, h: Pt): void {
      if (c.el.classList.contains(CLS.held) && Math.abs(c.x - h.x) + Math.abs(c.y - h.y) < 1.5 && Math.abs(c.vx) + Math.abs(c.vy) < 30) {
        c.el.classList.remove(CLS.held);
      }
    }
    var t0 = -1;
    var lastTs = 0;
    var prevT = 0;
    function frame(ts: number): void {
      if (t0 < 0) { t0 = ts; lastTs = ts; }
      var dt = clamp((ts - lastTs) / 1000, 0.001, 0.033);
      lastTs = ts;
      nowMs = ts;
      var t = (ts - t0) % CYCLE_MS;
      if (demo) {
        if (t < prevT) demoReset();
        demoAt(t);
      }
      prevT = t;
      cards.forEach(function (c: Card) { stepCard(c, dt); });
      afterStep(dt);
      draw();
      report();
      raf = requestAnimationFrame(frame);
    }
    function boot(): void {
      measure();
      cols = initialCols();
      settleNow();
      draw();
      report();
      on(window, 'resize', function () { measure(); settleNow(); draw(); });
      if (reduce) {
        root.classList.remove(CLS.demo);
      } else {
        raf = requestAnimationFrame(frame);
      }
    }

    var RING_RADIUS = 24;
    var RING_LERP = 0.12;
    var DONE_COLUMN = 1;
    var ARC_START = -90;
    var ROWS = 4;
    var FIXED_COL = 0;
    var CIRC = 2 * Math.PI * RING_RADIUS;
    var arcA = q('[data-role="arc-a"]');
    var arcB = q('[data-role="arc-b"]');
    var pctEl = q('[data-role="pct"]');
    var doneEl = q('[data-role="done"]');
    var ring = 0;
    var MOVES: number[][] = [[250, 0], [650, 1], [1050, 2], [1450, 3]];
    var demoN = 0;
    [arcA, arcB].forEach(function (a: HTMLElement) {
      a.setAttribute('r', String(RING_RADIUS));
      a.style.strokeDasharray = CIRC.toFixed(2);
      a.style.transform = 'rotate(' + ARC_START + 'deg)';
    });

    function initialCols(): number[][] {
      return [[0, 1, 2], [3]];
    }
    function targetOf(c: Card): Pt {
      var s = locate(c.i);
      return { x: slotX(s.c), y: slotY(s.r) };
    }
    function toggleCard(c: Card): void {
      var s = locate(c.i);
      cols[s.c].splice(s.r, 1);
      cols[1 - s.c].push(c.i);
    }
    function stepCard(c: Card, dt: number): void {
      var h = targetOf(c);
      spring(c, h.x, h.y, 170, 21, dt);
    }
    // 핵심: 호의 길이 = 완료 열 카드 수 ÷ 전체 카드 수. 목표가 바뀌면 RING_LERP 만큼씩 따라간다
    function goal(): number {
      return cols[DONE_COLUMN].length / cards.length;
    }
    function paintRing(): void {
      var rest = CIRC * (1 - ring);
      arcA.style.strokeDashoffset = rest.toFixed(2);
      arcB.style.strokeDashoffset = rest.toFixed(2);
      arcB.style.opacity = (ring * ring).toFixed(3);
      pctEl.textContent = Math.round(ring * 100) + '%';
      doneEl.textContent = cols[DONE_COLUMN].length + '/' + cards.length;
    }
    afterStep = function (dt: number) {
      ring += (goal() - ring) * (1 - Math.pow(1 - RING_LERP, dt * 60));
      paintRing();
    };
    extraSettle = function () {
      ring = goal();
      paintRing();
    };
    on(board, 'click', function (e: Event) {
      var c = cardAt(e.target);
      if (!c) return;
      stopDemo();
      toggleCard(c);
      sync();
    });
    function demoAt(t: number): void {
      while (demoN < MOVES.length && t >= MOVES[demoN][0]) {
        toggleCard(cards[MOVES[demoN][1]]);
        demoN++;
      }
    }
    function demoReset(): void {
      demoN = 0;
      cols = initialCols();
    }
    function metaText(): string {
      return 'RING_LERP ' + RING_LERP + ' · arc ' + (ring * 360).toFixed(0) + ' deg';
    }

    boot();

    return () => {
      cancelAnimationFrame(raf);
      off.forEach(function (fn: Off) { fn(); });
    };
  }, []);

  return (
    <main className={styles["stage"]}><div className={styles["kb"] + " " + styles["is-demo"]} ref={rootRef}><div className={styles["kb__row"]}><div className={styles["kb__board"]} data-role="board"><div className={styles["kb__track"]} data-role="track"><div className={styles["kb__col"]} data-role="col"><div className={styles["kb__head"]}><span className={styles["kb__name"]}>남은 일</span></div></div><div className={styles["kb__col"]} data-role="col"><div className={styles["kb__head"]}><span className={styles["kb__name"]}>완료</span></div></div><button className={styles["kb__card"]} type="button" data-role="card" data-tone="0"><span className={styles["kb__label"]} data-role="label">로그인 화면</span></button><button className={styles["kb__card"]} type="button" data-role="card" data-tone="1"><span className={styles["kb__label"]} data-role="label">결제 연동</span></button><button className={styles["kb__card"]} type="button" data-role="card" data-tone="2"><span className={styles["kb__label"]} data-role="label">알림 설정</span></button><button className={styles["kb__card"]} type="button" data-role="card" data-tone="3"><span className={styles["kb__label"]} data-role="label">검색 필터</span></button></div><div className={styles["kb__cursor"]} data-role="cursor"></div></div><div className={styles["kb__ringbox"]}><div className={styles["kb__dial"]}><svg viewBox="0 0 64 64" width="64" height="64" aria-hidden="true"><circle className={styles["kb__arc"] + " " + styles["kb__arc--bg"]} cx="32" cy="32" r="24"></circle><circle className={styles["kb__arc"] + " " + styles["kb__arc--a"]} data-role="arc-a" cx="32" cy="32" r="24"></circle><circle className={styles["kb__arc"] + " " + styles["kb__arc--b"]} data-role="arc-b" cx="32" cy="32" r="24"></circle></svg><span className={styles["kb__pct"]} data-role="pct"></span></div><span className={styles["kb__ringname"]}>진행률</span><span className={styles["kb__ringdone"]} data-role="done"></span></div></div><p className={styles["kb__meta"]} data-role="meta"></p></div></main>
  );
}