02Line item that slides down into the saved-for-later group

<main class="stage">
  <section class="mv is-demo" id="mv" aria-label="Cart and saved for later">
    <div class="mv__group">
      <p class="mv__head">
        <span class="mv__label">Cart</span>
        <output class="mv__n mv__swap"><span class="mv__v">2</span><span class="mv__alt" aria-hidden="true">1</span></output>
      </p>
      <ul class="mv__list" id="mv-cart">
        <li class="mv__row" data-pair="p1">
          <div class="mv__box"><div class="mv__in">
            <span class="mv__name">Rattan basket</span>
            <span class="mv__price">24,000 KRW</span>
            <button class="mv__b" type="button" aria-label="Move Rattan basket to saved for later"><svg viewBox="0 0 256 256" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M192,48V224l-64-40L64,224V48a8,8,0,0,1,8-8H184A8,8,0,0,1,192,48Z" opacity="0.2"/><path d="M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,177.57-51.77-32.35a8,8,0,0,0-8.48,0L72,209.57V48H184Z"/></svg></button>
          </div></div>
        </li>
        <li class="mv__row" data-pair="p2">
          <div class="mv__box"><div class="mv__in">
            <span class="mv__name">Linen apron</span>
            <span class="mv__price">16,000 KRW</span>
            <button class="mv__b" type="button" aria-label="Move Linen apron to saved for later"><svg viewBox="0 0 256 256" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M192,48V224l-64-40L64,224V48a8,8,0,0,1,8-8H184A8,8,0,0,1,192,48Z" opacity="0.2"/><path d="M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,177.57-51.77-32.35a8,8,0,0,0-8.48,0L72,209.57V48H184Z"/></svg></button>
          </div></div>
        </li>
      </ul>
    </div>
    <div class="mv__group">
      <p class="mv__head">
        <span class="mv__label">Saved for later</span>
        <output class="mv__n mv__swap"><span class="mv__v">0</span><span class="mv__alt" aria-hidden="true">1</span></output>
      </p>
      <ul class="mv__list" id="mv-saved">
        <li class="mv__row mv__row--saved is-out" data-pair="p1">
          <div class="mv__box"><div class="mv__in">
            <span class="mv__name">Rattan basket</span>
            <span class="mv__price">24,000 KRW</span>
            <button class="mv__b mv__b--back" type="button" aria-label="Move Rattan basket back to the cart"><svg viewBox="0 0 256 256" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M224,64l-12.16,66.86A16,16,0,0,1,196.1,144H70.55L56,64Z" opacity="0.2"/><path d="M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z"/></svg></button>
          </div></div>
        </li>
        <li class="mv__row mv__row--saved is-out" data-pair="p2">
          <div class="mv__box"><div class="mv__in">
            <span class="mv__name">Linen apron</span>
            <span class="mv__price">16,000 KRW</span>
            <button class="mv__b mv__b--back" type="button" aria-label="Move Linen apron back to the cart"><svg viewBox="0 0 256 256" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M224,64l-12.16,66.86A16,16,0,0,1,196.1,144H70.55L56,64Z" opacity="0.2"/><path d="M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z"/></svg></button>
          </div></div>
        </li>
      </ul>
    </div>
  </section>
</main>

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

// 나중에 담기를 누르면 그 줄이 grid-template-rows: 1fr → 0fr 로 접히고,
// 보관 묶음의 같은 상품 줄이 그만큼 열리며 안쪽 내용이 translateY 로 위에서 내려앉는다.
// 접히는 높이와 열리는 높이가 같아서 카드 전체 높이는 움직이지 않는다.
$duration: $dur-loop;
$easing: $ease-spring;
$color: $subject-ink;

@include stage($stage-paper);

.mv {
  box-sizing: border-box;
  width: min(300px, 92vw);
  padding: $sp-3;
  border-radius: $r-card;
  background: $subject-cream;
  box-shadow: $shadow-raised;
  color: $subject-ink;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.mv * { box-sizing: border-box; }

.mv__group + .mv__group { margin-top: $sp-2; }

.mv__head {
  display: flex;
  align-items: center;
  gap: $sp-2;
  margin: 0 0 $sp-1;
}
.mv__label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.mv__n {
  position: relative;
  min-width: 18px;
  padding: 0 $sp-1;
  border-radius: $r-pill;
  background: rgba(23, 20, 26, .1);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
// 미리보기 루프에서만 쓰는 두 번째 숫자 — 자리를 차지하지 않고 정적 경로에서는 보이지 않는다
.mv__alt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}

.mv__list {
  display: grid;
  gap: $sp-1;
  margin: 0;
  padding: 0;
  list-style: none;
}

// 줄 하나 = 높이를 주고받는 칸. 실제 클릭 경로는 transition 으로 부드럽게 접힌다
.mv__row {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows $dur-base $easing;
}
.mv__row.is-out { grid-template-rows: 0fr; }
// 접히는 칸에는 패딩을 두지 않는다 — 0fr 이 되어도 세로 패딩은 그대로 남는다.
// 안쪽을 감싸는 이 칸이 높이 0 이 되면서 패딩을 가진 진짜 줄을 잘라 낸다
.mv__box {
  min-height: 0;
  overflow: hidden;
  border-radius: $r-sm;
  background: $stage-paper;
  box-shadow: inset 0 0 0 1px rgba(23, 20, 26, .12);
}
.mv__in {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: $sp-2;
  padding: $sp-1 $sp-2;
}
.mv__row--saved .mv__box {
  background: $subject-ink;
  box-shadow: none;
}
.mv__row--saved .mv__in { color: $subject-cream; }
.mv__name {
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv__price {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  opacity: .72;
}
.mv__b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: $subject-ink;
  color: $subject-cream;
  cursor: pointer;
  &:focus-visible { outline: 2px solid $subject-blue; outline-offset: 2px; }
}
.mv__b--back {
  background: $subject-cream;
  color: $subject-ink;
}

// ── 격자 미리보기 루프 (2초) ──
// 여닫기를 한 프레임에 컷으로 끝낸다 — 대표 이미지가 「반쯤 접힌 줄」 이 되지 않게.
// 돌아오는 쪽만 70~86% 에 천천히 풀어 퇴장 프레임이 등장 프레임을 이기지 못하게 한다.
@keyframes mv-leave {
  0% { grid-template-rows: 1fr; animation-timing-function: steps(1, end); }
  24% { grid-template-rows: 1fr; animation-timing-function: steps(1, end); }
  25% { grid-template-rows: 0fr; animation-timing-function: steps(1, end); }
  70% { grid-template-rows: 0fr; animation-timing-function: $ease-out; }
  86% { grid-template-rows: 1fr; }
  100% { grid-template-rows: 1fr; }
}
@keyframes mv-arrive {
  0% { grid-template-rows: 0fr; animation-timing-function: steps(1, end); }
  24% { grid-template-rows: 0fr; animation-timing-function: steps(1, end); }
  25% { grid-template-rows: 1fr; animation-timing-function: steps(1, end); }
  70% { grid-template-rows: 1fr; animation-timing-function: $ease-out; }
  86% { grid-template-rows: 0fr; }
  100% { grid-template-rows: 0fr; }
}
// 열린 칸 안쪽이 위에서 내려앉는다 — 투명도가 아니라 transform 이라 중간 프레임에 유령이 없다.
// 칸이 열리는 컷과 같은 순간에 글자가 이미 칸 안에 들어와 있어야 대표 이미지가 빈 띠가 되지 않는다
@keyframes mv-drop {
  0%, 24% { transform: translateY(-10px); }
  45%, 100% { transform: translateY(0); }
}
@keyframes mv-press {
  0%, 21% { transform: scale(1); }
  25% { transform: scale(.78); }
  37%, 100% { transform: scale(1); }
}
@keyframes mv-a {
  0%, 24% { opacity: 1; }
  25%, 85% { opacity: 0; }
  86%, 100% { opacity: 1; }
}
@keyframes mv-b {
  0%, 24% { opacity: 0; }
  25%, 85% { opacity: 1; }
  86%, 100% { opacity: 0; }
}

.mv.is-demo {
  #mv-cart .mv__row:nth-child(2) { animation-name: mv-leave; }
  #mv-saved .mv__row:nth-child(2) { animation-name: mv-arrive; }
  #mv-cart .mv__row:nth-child(2),
  #mv-saved .mv__row:nth-child(2) {
    animation-duration: $duration;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
  #mv-saved .mv__row:nth-child(2) .mv__in {
    animation-name: mv-drop;
    animation-duration: $duration;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
  #mv-cart .mv__row:nth-child(2) .mv__b {
    animation-name: mv-press;
    animation-duration: $duration;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
  .mv__swap .mv__v { animation-name: mv-a; }
  .mv__swap .mv__alt { animation-name: mv-b; }
  .mv__swap .mv__v,
  .mv__swap .mv__alt {
    animation-duration: $duration;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
}

@media (max-width: 340px) {
  .mv { padding: $sp-2; }
  .mv__in { padding: $sp-1; }
  .mv__b { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv.is-demo .mv__row,
  .mv.is-demo .mv__in,
  .mv.is-demo .mv__b,
  .mv.is-demo .mv__v {
    animation: none !important;
    transform: none !important;
  }
  .mv.is-demo .mv__v { opacity: 1 !important; }
  // 정지 상태에서도 두 목록이 무엇인지는 보인다 — 겹쳐 둔 두 번째 숫자만 계속 감춘다
  .mv.is-demo .mv__alt { animation: none !important; opacity: 0 !important; }
  .mv__row { transition: none !important; }
}

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

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

.mv {
  box-sizing: border-box;
  width: min(300px, 92vw);
  padding: 12px;
  border-radius: 16px;
  background: #fff7e6;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  color: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.mv * {
  box-sizing: border-box;
}

.mv__group + .mv__group {
  margin-top: 8px;
}

.mv__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

.mv__label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.mv__n {
  position: relative;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.1);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.mv__alt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}

.mv__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv__row {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mv__row.is-out {
  grid-template-rows: 0fr;
}

.mv__box {
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(23, 20, 26, 0.12);
}

.mv__in {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}

.mv__row--saved .mv__box {
  background: #17141a;
  box-shadow: none;
}

.mv__row--saved .mv__in {
  color: #fff7e6;
}

.mv__name {
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv__price {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}

.mv__b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #17141a;
  color: #fff7e6;
  cursor: pointer;
}
.mv__b:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.mv__b--back {
  background: #fff7e6;
  color: #17141a;
}

@keyframes mv-leave {
  0% {
    grid-template-rows: 1fr;
    animation-timing-function: steps(1, end);
  }
  24% {
    grid-template-rows: 1fr;
    animation-timing-function: steps(1, end);
  }
  25% {
    grid-template-rows: 0fr;
    animation-timing-function: steps(1, end);
  }
  70% {
    grid-template-rows: 0fr;
    animation-timing-function: ease-out;
  }
  86% {
    grid-template-rows: 1fr;
  }
  100% {
    grid-template-rows: 1fr;
  }
}
@keyframes mv-arrive {
  0% {
    grid-template-rows: 0fr;
    animation-timing-function: steps(1, end);
  }
  24% {
    grid-template-rows: 0fr;
    animation-timing-function: steps(1, end);
  }
  25% {
    grid-template-rows: 1fr;
    animation-timing-function: steps(1, end);
  }
  70% {
    grid-template-rows: 1fr;
    animation-timing-function: ease-out;
  }
  86% {
    grid-template-rows: 0fr;
  }
  100% {
    grid-template-rows: 0fr;
  }
}
@keyframes mv-drop {
  0%, 24% {
    transform: translateY(-10px);
  }
  45%, 100% {
    transform: translateY(0);
  }
}
@keyframes mv-press {
  0%, 21% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.78);
  }
  37%, 100% {
    transform: scale(1);
  }
}
@keyframes mv-a {
  0%, 24% {
    opacity: 1;
  }
  25%, 85% {
    opacity: 0;
  }
  86%, 100% {
    opacity: 1;
  }
}
@keyframes mv-b {
  0%, 24% {
    opacity: 0;
  }
  25%, 85% {
    opacity: 1;
  }
  86%, 100% {
    opacity: 0;
  }
}
.mv.is-demo #mv-cart .mv__row:nth-child(2) {
  animation-name: mv-leave;
}
.mv.is-demo #mv-saved .mv__row:nth-child(2) {
  animation-name: mv-arrive;
}
.mv.is-demo #mv-cart .mv__row:nth-child(2),
.mv.is-demo #mv-saved .mv__row:nth-child(2) {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.mv.is-demo #mv-saved .mv__row:nth-child(2) .mv__in {
  animation-name: mv-drop;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.mv.is-demo #mv-cart .mv__row:nth-child(2) .mv__b {
  animation-name: mv-press;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.mv.is-demo .mv__swap .mv__v {
  animation-name: mv-a;
}
.mv.is-demo .mv__swap .mv__alt {
  animation-name: mv-b;
}
.mv.is-demo .mv__swap .mv__v,
.mv.is-demo .mv__swap .mv__alt {
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@media (max-width: 340px) {
  .mv {
    padding: 8px;
  }
  .mv__in {
    padding: 4px;
  }
  .mv__b {
    width: 20px;
    height: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mv.is-demo .mv__row,
  .mv.is-demo .mv__in,
  .mv.is-demo .mv__b,
  .mv.is-demo .mv__v {
    animation: none !important;
    transform: none !important;
  }
  .mv.is-demo .mv__v {
    opacity: 1 !important;
  }
  .mv.is-demo .mv__alt {
    animation: none !important;
    opacity: 0 !important;
  }
  .mv__row {
    transition: none !important;
  }
}

// 같은 상품의 줄을 두 목록에 미리 한 벌씩 두고 is-out 으로 높이(1fr↔0fr)만 주고받는다.
// 옮기는 쪽이 접히는 만큼 받는 쪽이 열리므로 Card 전체 높이는 그대로다
var mv = document.getElementById('mv');
var mvCart = document.getElementById('mv-cart');
var mvSaved = document.getElementById('mv-saved');

function mvTwin(list, pair) { return list.querySelector('[data-pair="' + pair + '"]'); }
function mvCount() {
  var lists = [mvCart, mvSaved];
  for (var i = 0; i < lists.length; i++) {
    var open = lists[i].querySelectorAll('.mv__row:not(.is-out)').length;
    lists[i].parentNode.querySelector('.mv__n .mv__v').textContent = String(open);
  }
}
function mvMove(row, to) {
  mv.classList.remove('is-demo');
  row.classList.add('is-out');
  mvTwin(to, row.getAttribute('data-pair')).classList.remove('is-out');
  mvCount();
}
mv.addEventListener('click', function (e) {
  var btn = e.target.closest('.mv__b');
  if (!btn) { return; }
  var row = btn.closest('.mv__row');
  mvMove(row, mvCart.contains(row) ? mvSaved : mvCart);
});

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

export type CartSavedItem = {
  id: string;
  name: string;
  price: string;
  moveLabel: string;
  backLabel: string;
};

export type CartMoveToSavedProps = {
  cartLabel?: string;
  savedLabel?: string;
  groupLabel?: string;
  items?: CartSavedItem[];
  /** 격자 미리보기용 2초 자동 루프. 사람이 손대면 꺼진다 */
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

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

const DEFAULT_ITEMS: CartSavedItem[] = [
  { id: "p1", name: "라탄 바구니", price: "24,000원", moveLabel: "라탄 바구니를 나중에 담기로 옮기기", backLabel: "라탄 바구니를 장바구니로 되돌리기" },
  { id: "p2", name: "린넨 앞치마", price: "16,000원", moveLabel: "린넨 앞치마를 나중에 담기로 옮기기", backLabel: "린넨 앞치마를 장바구니로 되돌리기" },
];

function BookmarkIcon() {
  return (
    <svg viewBox="0 0 256 256" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M192,48V224l-64-40L64,224V48a8,8,0,0,1,8-8H184A8,8,0,0,1,192,48Z" opacity="0.2"/><path d="M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,177.57-51.77-32.35a8,8,0,0,0-8.48,0L72,209.57V48H184Z"/></svg>
  );
}
function CartIcon() {
  return (
    <svg viewBox="0 0 256 256" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M224,64l-12.16,66.86A16,16,0,0,1,196.1,144H70.55L56,64Z" opacity="0.2"/><path d="M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z"/></svg>
  );
}

export default function CartMoveToSaved({
  cartLabel = "장바구니",
  savedLabel = "나중에 담기",
  groupLabel = "장바구니와 나중에 담기",
  items = DEFAULT_ITEMS,
  demo = true,
  duration = 2000,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#17141a",
}: CartMoveToSavedProps) {
  const [savedIds, setSavedIds] = useState<string[]>([]);
  const [live, setLive] = useState(demo);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  // 같은 상품 줄을 두 목록에 한 벌씩 두고 높이(1fr↔0fr)만 주고받는다 — 카드 전체 높이는 그대로다
  function move(id: string, toSaved: boolean) {
    setLive(false);
    setSavedIds((prev: string[]) => (toSaved ? prev.concat([id]) : prev.filter((x) => x !== id)));
  }

  const cartCount = items.length - savedIds.length;
  const savedCount = savedIds.length;
  // 미리보기 루프가 컷으로 갈아 끼우는 두 번째 숫자 — 둘째 줄이 옮겨 갔을 때의 개수
  const altCart = items.length - 1;
  const altSaved = 1;

  function count(now: number, alt: number) {
    return (
      <output className={`${styles.n} ${styles.swap}`}>
        <span className={styles.value}>{now}</span>
        {live ? <span className={styles.alt} aria-hidden="true">{alt}</span> : null}
      </output>
    );
  }

  function row(item: CartSavedItem, saved: boolean) {
    const out = saved ? savedIds.indexOf(item.id) < 0 : savedIds.indexOf(item.id) >= 0;
    const cls = [styles.row, saved ? styles.rowSaved : "", out ? styles.isOut : ""].filter(Boolean).join(" ");
    return (
      <li className={cls} key={item.id}>
        <div className={styles.box}>
          <div className={styles.in}>
            <span className={styles.name}>{item.name}</span>
            <span className={styles.price}>{item.price}</span>
            <button
              className={`${styles.btn} ${saved ? styles.btnBack : ""}`}
              type="button"
              onClick={() => move(item.id, !saved)}
              aria-label={saved ? item.backLabel : item.moveLabel}
            >
              {saved ? <CartIcon /> : <BookmarkIcon />}
            </button>
          </div>
        </div>
      </li>
    );
  }

  const cls = [styles.mv, live ? styles.isDemo : ""].filter(Boolean).join(" ");

  return (
    <section className={cls} style={vars} aria-label={groupLabel}>
      <div className={styles.group}>
        <p className={styles.head}>
          <span className={styles.label}>{cartLabel}</span>
          {count(cartCount, altCart)}
        </p>
        <ul className={`${styles.list} ${styles.listCart}`}>{items.map((it) => row(it, false))}</ul>
      </div>
      <div className={styles.group}>
        <p className={styles.head}>
          <span className={styles.label}>{savedLabel}</span>
          {count(savedCount, altSaved)}
        </p>
        <ul className={`${styles.list} ${styles.listSaved}`}>{items.map((it) => row(it, true))}</ul>
      </div>
    </section>
  );
}