헤어라인 그리드에 올라앉는 플레이리스트 카드 목록

const PLAYLISTS = [
  { title: "새벽 코딩 Lo-fi", owner: "민", tracks: "42곡 · 2시간 31분", plays: 1280, likes: 312, cover: "from-indigo-600 via-violet-500 to-sky-400", badge: "" },
  { title: "비 오는 날 재즈", owner: "서", tracks: "28곡 · 1시간 47분", plays: 864, likes: 190, cover: "from-zinc-700 via-slate-500 to-zinc-300", badge: "" },
  { title: "주말 드라이브 시티팝", owner: "지", tracks: "35곡 · 2시간 9분", plays: 2410, likes: 588, cover: "from-pink-500 via-orange-400 to-amber-200", badge: "" },
  { title: "집중용 피아노", owner: "현", tracks: "50곡 · 3시간 2분", plays: 3102, likes: 740, cover: "from-emerald-600 via-teal-400 to-cyan-200", badge: "" },
  { title: "러닝 160BPM", owner: "윤", tracks: "24곡 · 1시간 12분", plays: 455, likes: 98, cover: "from-red-600 via-rose-500 to-orange-300", badge: "비공개" },
  { title: "잠들기 전 앰비언트", owner: "하", tracks: "18곡 · 1시간 40분", plays: 1975, likes: 421, cover: "from-slate-900 via-indigo-900 to-violet-700", badge: "링크 공유" },
  { title: "90년대 가요 리마스터", owner: "도", tracks: "60곡 · 4시간 5분", plays: 5210, likes: 1203, cover: "from-yellow-400 via-lime-400 to-green-500", badge: "" },
  { title: "카페 어쿠스틱", owner: "아", tracks: "31곡 · 1시간 58분", plays: 690, likes: 151, cover: "from-amber-700 via-orange-500 to-yellow-200", badge: "" },
];

const playIcon = (
  <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
    <path d="M5 3.5v9l7-4.5-7-4.5Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
  </svg>
);
const heartIcon = (
  <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
    <path d="M8 13.5S2.5 10.2 2.5 6.3A2.8 2.8 0 0 1 8 5a2.8 2.8 0 0 1 5.5 1.3C13.5 10.2 8 13.5 8 13.5Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
  </svg>
);

export default function PlaylistCardGrid() {
  return (
    <section className="w-full bg-[#09090b] px-3 py-12 text-zinc-100 sm:px-6">
      <div className="mx-auto max-w-7xl">
        <div className="flex items-end justify-between gap-4 px-1 pb-5">
          <div>
            <h2 className="text-2xl font-semibold tracking-tight">요즘 많이 듣는 플레이리스트</h2>
            <p className="mt-1 text-sm text-zinc-500">리스너들이 직접 만든 목록이에요.</p>
          </div>
          <div className="hidden rounded-lg border border-zinc-800 p-0.5 text-[13px] sm:flex">
            <span className="rounded-md bg-zinc-800 px-3 py-1">최신</span>
            <span className="px-3 py-1 text-zinc-500">인기</span>
          </div>
        </div>
        <div className="grid grid-cols-1 border-l border-t border-zinc-800 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 [&>*]:border-b [&>*]:border-r [&>*]:border-zinc-800">
          {PLAYLISTS.map((p) => (
            <article key={p.title} className="group relative p-3 transition-colors hover:bg-zinc-900/60 sm:p-4">
              <a
                href="#"
                className="relative block overflow-hidden rounded-md ring-1 ring-zinc-800 transition-[box-shadow,transform] duration-300 group-hover:-translate-y-0.5 group-hover:shadow-[0_16px_40px_-16px_rgba(0,0,0,0.9)] group-hover:ring-zinc-600"
              >
                <div className={`relative aspect-[4/3] bg-gradient-to-br ${p.cover}`}>
                  <span className="absolute bottom-3 left-3 right-3 text-xl font-bold leading-tight text-white/90 drop-shadow">{p.title}</span>
                </div>
                {p.badge && (
                  <span className="absolute left-2 top-2 rounded bg-black/75 px-1.5 py-0.5 text-[11px] font-medium text-white backdrop-blur">{p.badge}</span>
                )}
                <span className="absolute right-2 top-2 rounded bg-black/75 px-1.5 py-0.5 font-mono text-[10.5px] text-white/90 opacity-0 backdrop-blur transition-opacity duration-200 group-hover:opacity-100">
                  {p.tracks}
                </span>
              </a>
              <div className="flex items-center gap-2 px-0.5 pt-3">
                <span className="flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-zinc-500 to-zinc-700 text-[10px] font-semibold" aria-hidden>
                  {p.owner}
                </span>
                <h3 className="min-w-0 flex-1 truncate text-[14px] font-medium">{p.title}</h3>
                <span className="flex shrink-0 items-center gap-2.5 text-[11.5px] text-zinc-500">
                  <span className="inline-flex items-center gap-1" title="재생">
                    {playIcon}
                    <span className="tabular-nums">{p.plays.toLocaleString("ko-KR")}</span>
                  </span>
                  <span className="inline-flex items-center gap-1" title="좋아요">
                    {heartIcon}
                    <span className="tabular-nums">{p.likes.toLocaleString("ko-KR")}</span>
                  </span>
                </span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}