@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Panel.js

@@ -0,0 +1,162 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import Toggle from './Toggle';
+import SegmentedControl from './SegmentedControl';
+import Dropdown from './Dropdown';
+import Button from './Button';
+import Badge from './Badge';
+import { deviceKindVariant } from '../utils/deviceKind';
+import TextField from './TextField';
+import Loader from './Loader';
+import './Panel.css';
+const noop = () => { };
+export default function Panel({ title, actions, size = 'medium', minHeight, maxWidth, className, scrollable, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
+    const cls = cx('panel', `panel--${size}`, form ? 'panel--form' : '', 
+    /* minHeight 패널은 마지막 행 아래 빈 공간이 생길 수 있으므로 행 하단 구분선 사용 */
+    minHeight !== undefined ? 'panel--fill' : '', !useBorder ? 'panel--no-border' : '', !useBg ? 'panel--no-bg' : '', !useRowBorder ? 'panel--no-row-border' : '', className);
+    const style = {};
+    if (minHeight !== undefined)
+        style.minHeight = minHeight;
+    if (maxWidth !== undefined)
+        style.maxWidth = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
+    if (labelWidth !== undefined)
+        style['--panel-label-width'] = typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
+    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [title != null && (_jsxs("div", { className: "panel__header", children: [_jsx("h2", { className: "panel__title h5b", children: title }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })) : empty != null && (children == null || (Array.isArray(children) && children.length === 0)) ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: "panel__body--scroll", children: children })) : children] }));
+}
+// ── PanelGrid ──────────────────────────────────────────────────────────────
+/** @public */
+export function PanelGrid({ cols = 2, children }) {
+    return (_jsx("div", { className: "panel-grid", style: { '--panel-grid-cols': cols }, children: children }));
+}
+export function PanelRow(props) {
+    // toggle 행의 라벨-스위치 연결용 id — 모든 variant에서 훅 호출 순서를 유지하기 위해
+    // 조건부 return들보다 앞에서 무조건 호출한다 (사용하지 않는 variant에서는 그냥 버려짐)
+    const uid = useId();
+    // children 기반 하위 호환 모드
+    if (!('variant' in props)) {
+        const { label, sub, onClick, children, align = 'horizontal', icon } = props;
+        const handleKeyDown = (e) => {
+            if (!onClick)
+                return;
+            // 우측 children 안의 버튼/토글 등이 자체적으로 Enter/Space를 처리하므로,
+            // 행 자기 자신에서 발생한 키 입력만 행 클릭으로 취급한다
+            if (e.target !== e.currentTarget)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+            }
+        };
+        return (_jsxs("div", { className: cx('panel-row', align === 'vertical' ? 'panel-row--vertical' : '', onClick ? 'panel-row--clickable' : ''), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [icon != null && _jsx("div", { className: "panel-row__icon", children: icon }), label != null && (_jsxs("div", { className: "panel-row__left", children: [_jsx("div", { className: "panel-row__label body-3", children: label }), sub && _jsx("div", { className: "panel-row__sub caption-1", children: sub })] })), _jsx("div", { className: "panel-row__right", children: children })] }));
+    }
+    // 설명 전용 행 — 라벨/우측 구조 없이 문단만 렌더
+    if (props.variant === 'description') {
+        const p = props;
+        return (_jsx("div", { className: "panel-row panel-row--block", children: _jsx("p", { className: "panel-row__description body-3", children: p.children }) }));
+    }
+    // 빈 상태 — 라벨 없이 중앙 정렬된 한 줄
+    if (props.variant === 'empty') {
+        const p = props;
+        return _jsx("div", { className: "panel-row panel-row--empty body-3", children: p.children });
+    }
+    // 로딩 — 중앙 스피너 1개
+    if (props.variant === 'loading') {
+        return _jsx("div", { className: "panel-row panel-row--loading", children: _jsx(Loader, { size: 28 }) });
+    }
+    // custom 행에 label이 없으면 좌/우 분할 없이 children을 그대로 꽉 채워 렌더
+    // (CodeBox처럼 라벨과 짝지을 수 없는 큰 블록 콘텐츠를 행 구조 안에 넣을 때 사용)
+    if (props.variant === 'custom' && !props.label) {
+        const p = props;
+        return (_jsx("div", { className: "panel-row panel-row--block", children: p.children }));
+    }
+    const { variant, label, sub, onClick, required, error, align = 'horizontal', useFullWidth = false, icon } = props;
+    let right = null;
+    // toggle 행만 왼쪽 라벨(panel-row__label)을 <label htmlFor>로 렌더해 스위치와 프로그래밍적으로
+    // 연결한다 — 그 전엔 시각적으로만 옆에 붙어있어 라벨 텍스트를 클릭해도 토글이 안 되고
+    // 스크린리더도 이 스위치가 뭘 위한 건지 안내하지 못했다.
+    const toggleId = variant === 'toggle' ? `panel-toggle-${uid}` : undefined;
+    if (variant === 'toggle') {
+        const p = props;
+        right = _jsx(Toggle, { checked: p.checked, onChange: p.onChange, id: toggleId });
+    }
+    else if (variant === 'segmented') {
+        const p = props;
+        // dropdown 행과 동일하게, PanelRow 왼쪽 라벨은 <label htmlFor>가 아닌 일반 div라서
+        // SegmentedControl에 ariaLabel로 넘겨야 스크린리더가 이름 없는 라디오그룹으로 안내하지 않는다.
+        right = _jsx(SegmentedControl, { options: p.options, value: p.value, onChange: p.onChange, size: p.size ?? 40, ariaLabel: label });
+    }
+    else if (variant === 'dropdown') {
+        const p = props;
+        const dropdowns = p.dropdowns?.length ? (_jsx("div", { className: `panel-row__dropdown-group${useFullWidth ? ' panel-row__dropdown-group--full' : ''}`, children: p.dropdowns.map((d, i) => (_jsx("div", { className: useFullWidth ? 'panel-row__dropdown-item--full' : undefined, children: _jsx(Dropdown, { options: d.options, value: d.value, onChange: d.onChange, placeholder: d.placeholder, block: useFullWidth, error: !!error, 
+                    // 한 행에 여러 개가 놓이므로 행 라벨만 넘기면 셋 다 "생년월일" 이라는 같은 이름이 된다.
+                    // aria-label 이 있으면 스크린리더는 트리거의 화면 텍스트(년/월/일)를 읽지 않으므로
+                    // 사용자는 어느 것이 무엇인지 구별할 수 없다 — placeholder 를 붙여 구별되게 한다.
+                    ariaLabel: d.ariaLabel ?? ([label, d.placeholder].filter(Boolean).join(' ') || undefined) }) }, i))) })) : (
+        // PanelRow 왼쪽 라벨(panel-row__label)은 <label htmlFor>가 아니라 그냥 div라서 트리거 버튼과
+        // 프로그래밍적으로 연결되지 않는다 — ariaLabel로 직접 이름을 넘긴다 (TextField의 ariaLabel과 동일 패턴)
+        _jsx(Dropdown, { options: p.options ?? [], value: p.value ?? '', onChange: p.onChange ?? noop, block: useFullWidth, error: !!error, ariaLabel: label }));
+        right = error ? (_jsxs("div", { className: `panel-row__dropdown-error-wrap${useFullWidth ? ' panel-row__dropdown-error-wrap--full' : ''}`, children: [dropdowns, _jsx("span", { className: "caption-1 panel-row__error", role: "alert", children: error })] })) : dropdowns;
+    }
+    else if (variant === 'button') {
+        const p = props;
+        if (p.buttons?.length) {
+            right = (_jsx("div", { className: "panel-row__button-group", children: p.buttons.map((btn, i) => (_jsx(Button, { size: btn.btnSize ?? 40, variant: btn.btnVariant ?? 'default', disabled: btn.disabled, onClick: btn.onClick, children: btn.label }, i))) }));
+        }
+        else {
+            right = (_jsx(Button, { size: p.btnSize ?? 40, variant: p.btnVariant ?? 'default', disabled: p.disabled, onClick: p.onClick, children: p.buttonLabel }));
+        }
+    }
+    else if (variant === 'text') {
+        const p = props;
+        right = _jsx("span", { className: `panel-row__text body-2${useFullWidth ? ' panel-row__text--full' : ''}`, style: p.valueColor ? { color: p.valueColor } : undefined, children: p.value });
+    }
+    else if (variant === 'input') {
+        const p = props;
+        right = (_jsxs("div", { className: `panel-row__input-wrap${useFullWidth ? ' panel-row__input-wrap--full' : ''}`, children: [_jsx(TextField, { value: p.value, onChange: p.onChange ?? noop, onKeyDown: p.onKeyDown, onEnter: p.onEnter, placeholder: p.placeholder, inputMode: p.inputMode, readOnly: p.readOnly, disabled: p.disabled, type: p.type, autoComplete: p.autoComplete, maxLength: p.maxLength, showCount: p.showCount, multiline: p.multiline, rows: p.rows, fullWidth: useFullWidth, error: error, ariaLabel: label, required: required }), p.helperText && _jsx("div", { className: "panel-row__helper caption-1", children: p.helperText })] }));
+    }
+    else if (variant === 'custom') {
+        const p = props;
+        right = p.children;
+    }
+    const isLabelFixed = variant === 'input' || variant === 'dropdown' || ((variant === 'text' || variant === 'custom') && useFullWidth);
+    // 위 children 모드와 동일한 키보드 처리 — 이쪽 경로에만 빠져 있어서,
+    // variant 모드에 onClick을 주면 조용히 마우스 전용이 된다(현재 사용처는 없지만 예방).
+    const handleKeyDown = (e) => {
+        if (!onClick)
+            return;
+        if (e.target !== e.currentTarget)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    return (_jsxs("div", { className: cx('panel-row', align === 'vertical' ? 'panel-row--vertical' : '', isLabelFixed ? 'panel-row--label-fixed' : '', variant === 'text' ? 'panel-row--text' : '', onClick ? 'panel-row--clickable' : ''), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [icon != null && _jsx("div", { className: "panel-row__icon", children: icon }), _jsxs("div", { className: "panel-row__left", children: [toggleId ? (_jsxs("label", { htmlFor: toggleId, className: "panel-row__label body-3", children: [label, required && _jsx("span", { className: "required-mark", children: "*" })] })) : (_jsxs("div", { className: "panel-row__label body-3", children: [label, required && _jsx("span", { className: "required-mark", children: "*" })] })), sub && _jsx("div", { className: "panel-row__sub caption-1", children: sub })] }), _jsx("div", { className: "panel-row__right", children: right })] }));
+}
+/**
+ * 제목 아래 한 줄로 세울 곁정보 — 브랜드·착용형태.
+ *
+ * 제목으로 이미 쓴 값과 빈 값, 그리고 서로 같은 값을 걷어 낸다. 걷어 내지 않으면
+ * 브랜드도 형태도 '기타' 인 기기가 **'기타 · 기타'** 로 떴다(같은 말이 두 번).
+ */
+function 메타(d) {
+    const 제목 = d.productName || d.brand;
+    const 조각 = [d.brand, d.fitType].filter((v) => !!v && v !== 제목);
+    return [...new Set(조각)].join(' · ');
+}
+export function PanelRowDevice({ devices, onRelease }) {
+    const { t } = useTranslation();
+    const SIDES = ['좌', '우'];
+    return (_jsx("div", { className: "panel-row panel-row--device", children: SIDES.map(side => {
+            const d = devices[side];
+            const sideLabel = side === '좌' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
+            return (_jsxs("div", { className: "panel-row__device-column", children: [_jsxs("div", { className: "panel-row__device-head", children: [_jsx("span", { className: "panel-row__device-side body-2b", children: sideLabel }), d && onRelease && (
+                            /* 표의 줄 끝 단추와 같은 모양·같은 말 — 하는 일도 같다.
+                               이력에서 지우는 것이 아니라 '지금 끼고 있음' 만 내린다
+                               (잠시 안 씀·수리 보냄 같은 경우가 실제로 있다). */
+                            _jsx(Button, { size: 32, type: "dot", icon: "x", ariaLabel: t('customers.device.unwear', '착용 해제'), showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: d.device }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), _jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: `${d.wornYear}.${d.wornMonth}.${d.wornDay}` }) })] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: t('customers.device.notRegistered', '미등록') }))] }, side));
+        }) }));
+}

package/dist/packages/core/src/components/PassCard/PassCard.css

@@ -0,0 +1,289 @@
+/* ── PassCard ─────────────────────────────────────────────────────── */
+/* 카드 크기 300 × 188 고정(신용카드 비율 근사, 세로를 정수로 맞춤).      */
+/* 프레임 = 카드 크기 + cqw 쿼리 컨테이너.
+   padding이 없어 컨테이너 폭 = 카드 폭(300px) 그대로 → cqw가 정확히 계산됨.
+   내부 치수를 카드 폭(cqw)에 비례시켜 모바일/데스크탑 어디서든 동일 비율로 스케일. */
+.pass-card-frame {
+  width: 300px;
+  max-width: 100%;
+  height: 188px;
+  container-type: inline-size;
+}
+
+.pass-card {
+  position: relative;
+  width: 300px;
+  height: 188px;
+  border-radius: 16px;
+  padding: var(--spacing-l);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 프레임 안의 앞면 카드 — 프레임을 꽉 채우고, 자기 치수도 cqw(프레임 기준)로 비례.
+   (뒷면 .pass-card-back은 frame 없이 위 base 규칙의 고정 px 유지) */
+.pass-card-frame > .pass-card {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: auto;
+  border-radius: 5.33cqw;   /* 16px @300 */
+  padding: 6.67cqw;         /* 20px @300 (= --spacing-l) */
+}
+
+.pass-card--clickable {
+  cursor: pointer;
+}
+
+@media (max-width: 360px) {
+  .pass-card-frame,
+  .pass-card {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+/* ── 상태별 기본 그림자 (hover 시 JS에서 동적으로 덮어씀) ─────────────── */
+.pass-card--active  { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); }
+.pass-card--pending { box-shadow: 0px 2px 8px  rgba(0, 0, 0, 0.05); }
+.pass-card--expired { box-shadow: none; }
+
+/* ── 만료 카드: 브랜드색 대신 회색 팔레트 ─────────────────────────────────
+   opacity나 grayscale로 전체를 흐리게 뭉개면 글자까지 읽기 어려워진다.
+   배경 도형만 회색 토큰으로 바꾸고 글자는 대비를 유지한 채 톤만 낮춘다.
+
+   PassCardBg 9종은 도형 색을 예외 없이 --color-main / --color-sub로 그린다
+   (div background, linear-gradient, SVG stopColor 전부 동일). 그래서 배경별로
+   클래스를 나열하는 대신 카드 범위에서 이 두 변수만 회색으로 재정의하면
+   9종 전부가 한 번에 회색이 되고, 배경이 추가돼도 따라온다. */
+.pass-card--expired {
+  --color-main: var(--color-disabled);
+  --color-sub:  var(--color-whiteLine);
+  /* 심볼/좌측 판 전용 톤(아래, PassCardBgLeftColorGrid.css에서도 참조) — --color-whiteLine은
+     원래 헤어라인용 토큰이라 다크모드에서 8% 알파 흰색으로 정의돼, 솔리드 배경으로 쓰면
+     짙은 만료 카드 배경(--color-darkWhite) 위에서 거의 안 보인다. 라이트모드에서는
+     whiteLine과 같은 밝기를 유지하고 다크모드에서만 불투명한 값으로 대체한다. */
+  --pass-card-expired-shape: var(--color-whiteLine);
+}
+
+[data-theme="dark"] .pass-card--expired {
+  --pass-card-expired-shape: rgba(255, 255, 255, 0.18);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) .pass-card--expired {
+    --pass-card-expired-shape: rgba(255, 255, 255, 0.18);
+  }
+}
+/* 전면 컬러 배경(오픈특가 계열 _v1)은 회색이 돼도 여전히 어두워, 흰 글자를 전제로
+   만든 대비가 무너진다. 만료 카드는 바탕을 흰색으로 통일하고 도형만 회색으로 남긴다
+   (.pass-card-bg는 9종 공통 루트 — 각 배경의 자체 background 선언보다 특이도가 높다). */
+.pass-card--expired .pass-card-bg {
+  background: var(--color-darkWhite);
+}
+/* 배경 우측 상단 심볼은 흰색/그라디언트 SVG(컬러 배경 전제)라 그대로 두면 뜬다.
+   심볼은 자기 SVG를 마스크로 두고 있으므로(.pass-card-bg__symbol) background만
+   토큰 색으로 바꾸면 형태는 그대로 둔 채 단색으로 칠해진다 — 필터로 눌렀을 때와 달리
+   색조가 있는 토큰과 정확히 같은 값이 나온다.
+   (.pass-card__logo는 .pass-card-bg 밖이라 이 선택자에 걸리지 않는다 —
+   로고는 JS에서 _black variant로 교체된다.) */
+.pass-card--expired .pass-card-bg__symbol {
+  background: var(--pass-card-expired-shape);
+}
+/* 글자: 인라인 --pass-card-text를 쓰는 요소들을 직접 덮는다. */
+.pass-card--expired .pass-card__plan,
+.pass-card--expired .pass-card__price-area,
+.pass-card--expired .pass-card__usage,
+.pass-card--expired .pass-card__usage-percent,
+.pass-card--expired .pass-card__usage-remaining,
+/* 흰 글자를 전제로 한 테마(_v1 등)는 바탕이 흰색으로 바뀌면 카피라이트가 사라진다 */
+.pass-card--expired .pass-card__copyright {
+  color: var(--color-gray);
+}
+/* 이너 쉐도우 우하단 선도 브랜드 파랑(rgba(73,156,223,.2))이라 만료 카드에 남으면
+   테두리만 파랗게 뜬다. 같은 자리·같은 알파로 회색 토큰만 바꿔 끼운다.
+   좌상단 흰 하이라이트는 기본 카드와 동일하게 유지.
+   기본 .pass-card::after와 특이도가 같은데 소스 순서가 앞이라 그대로면 밀린다 —
+   만료 규칙을 한곳에 모아두려고 클래스를 겹쳐 특이도만 올린다. */
+.pass-card.pass-card--expired::after {
+  box-shadow:
+    inset 1px 1px 0px rgba(255, 255, 255, 0.5),
+    inset -1px -1px 0px color-mix(in srgb, var(--color-gray) 10%, transparent);
+}
+
+/* ── 이너 쉐도우 (콘텐츠 위에 렌더) ──────────────────────────────────── */
+.pass-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px rgba(73, 156, 223, 0.2);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* ── 내부 요소 ──────────────────────────────────────────────────────── */
+.pass-card__top {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+  /* 좌상단 요소(로고+플랜)를 살짝 위로 */
+  margin-top: -1.67cqw;   /* -5px @300 */
+}
+
+.pass-card__top-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.pass-card__logo {
+  height: 10.67cqw;   /* 32px @300 */
+  width: auto;
+  object-fit: contain;
+}
+
+
+.pass-card__plan {
+  position: relative;
+  z-index: 1;
+  color: var(--pass-card-text, var(--color-pureBlack));
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-top: -0.67cqw;   /* -2px @300 */
+}
+
+/* 숫자 없는 플랜명(예외) — 카드 폭 비례 */
+.pass-card__plan .h0 {
+  font-size: 13.33cqw;    /* 40px @300 */
+  line-height: 1.3;
+}
+
+.pass-card .pass-card__plan-number {
+  font-size: 17.33cqw;    /* 52px @300 */
+  line-height: 1;
+  letter-spacing: -1cqw;  /* -3px @300 */
+}
+
+/* 단위(일/년) + suffix(이용권) — 카드 폭 비례 */
+.pass-card__plan .h5b {
+  font-size: 5cqw;        /* 15px @300 */
+  line-height: 1.53;
+}
+
+/* 단위 — 숫자 하단(베이스라인)에 맞춤 */
+.pass-card__plan-unit {
+  margin-left: 0.67cqw;   /* 2px @300 */
+  position: relative;
+  top: -0.67cqw;
+}
+
+.pass-card__plan-suffix {
+  margin-top: 0;
+  margin-left: 0.67cqw;
+}
+
+.pass-card .pass-card__copyright {
+  margin: auto 0 0 0;
+  font-size: 3.67cqw;   /* 11px @300 (caption-2) */
+  line-height: 1.36;
+  /* 본문 텍스트 색을 따름(라이트 카드=검정, 다크/컬러 카드=흰색) */
+  color: var(--pass-card-text, var(--color-black));
+  text-align: left;
+  position: relative;
+  z-index: 1;
+}
+
+/* 우측 하단 가격 묶음 — 할인 배지(위) + 가격(아래). 카피라이트 대신 표시 */
+.pass-card__price-area {
+  /* 하단 우측 패딩에 고정 — 할인 배지로 묶음이 커져도 가격이 카드 밖으로 밀리지 않게 */
+  position: absolute;
+  right: 6.67cqw;          /* 20px @300 (= --spacing-l) */
+  /* h1 line-height(44/32) 여백 보정 — 시각적으로 패딩에 맞게 살짝 더 내림 */
+  bottom: 4.67cqw;         /* 14px @300 */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0;
+  z-index: 1;
+}
+
+/* 가격 묶음 타이포 — 카드 폭 비례 */
+.pass-card__price-area .h1 { font-size: 10.67cqw; line-height: 1.375; }  /* 32px @300 */
+.pass-card__price-area .h5 { font-size: 5cqw;     line-height: 1.53;  }  /* 15px @300, 통화기호 */
+
+/* 사용량/남은 시간 — 카피라이트 대신 표시(가격 area와 같은 위치, 두 줄 캡션) */
+.pass-card__usage {
+  position: absolute;
+  right: 6.67cqw;
+  bottom: 4.67cqw;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0;
+  z-index: 1;
+  color: var(--pass-card-text, var(--color-black));
+}
+.pass-card__usage-percent {
+  font-size: 3.67cqw;   /* 11px @300 (caption-2) */
+  line-height: 1.36;
+  opacity: 0.9;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0;
+}
+/* 남은 시간 텍스트는 h5b — 카드 폭 비례 */
+.pass-card__usage .pass-card__usage-remaining {
+  font-size: 5cqw;      /* 15px @300 (h5) */
+  line-height: 1.53;
+  opacity: 0.9;
+}
+/* 숫자만 크게(h1) — 가격 숫자와 동일, 카드 폭 비례 */
+.pass-card__usage .pass-card__usage-value {
+  font-size: 10.67cqw;  /* 32px @300 (h1) */
+  line-height: 1.2;
+}
+/* % 기호는 h5b — 가격 통화기호와 같은 패턴. 숫자와 간격 0. */
+.pass-card__usage .pass-card__usage-symbol {
+  font-size: 5cqw;      /* 15px @300 (h5) */
+  line-height: 1.53;
+}
+
+/* 가격 숫자 위 할인 배지 — 가격과 동일 색(투명도 없음). \n으로 줄바꿈 허용 */
+.pass-card__discount {
+  color: var(--pass-card-text, var(--color-pureBlack));
+  white-space: pre-line;
+  text-align: right;
+  font-size: 4.67cqw;   /* 14px @300 (body-3) */
+  line-height: 1.2;
+}
+
+/* 가격 */
+.pass-card__price {
+  color: var(--pass-card-text, var(--color-pureBlack));
+  text-align: right;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2cqw;            /* 6px @300 */
+}
+
+/* 가격 통화기호(pre/post) — h5 타이포와 함께 쓰임 */
+.pass-card__price-symbol { }
+
+/* 가격 숫자 — h1 타이포와 함께 쓰임 */
+.pass-card__price-amount { }
+
+/* 원가(취소선) — 현재가 왼쪽. 가격 색상과 동일하되 75% 불투명도 */
+.pass-card__price-original {
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+  font-size: 4.67cqw;   /* 14px @300 (body-3) */
+  line-height: 1.57;
+  color: color-mix(in srgb, var(--pass-card-text, var(--color-pureBlack)) 75%, transparent);
+}

package/dist/packages/core/src/components/PassCard/PassCard.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react';
+import { type PassCardProduct, type PassCardType } from './passCardProduct';
+export type { PassCardType };
+import './PassCard.css';
+/** @public */
+export type PassCardState = 'active' | 'pending' | 'expired';
+/** @public */
+export interface PassCardProps {
+    /**
+     * 상품 서술자. 넘기면 카드가 type·plan(·가격)을 스스로 도출한다.
+     * 아래 개별 prop(plan/type/label/price…)을 직접 주면 그것이 우선한다.
+     */
+    product?: PassCardProduct;
+    /** product.price를 카드에 표시할지 여부. 기본 false(구독 카드 등 가격 미표시). */
+    showPrice?: boolean;
+    /** 기간 토큰(예: '30일'). 미지정 시 product에서 도출. */
+    plan?: string;
+    type?: PassCardType;
+    startDate?: string;
+    endDate?: string;
+    /**
+     * 전환으로 일시정지되어 남은 시간(초)이 알려진 경우에만 지정.
+     * 지정하면 우측 하단에 "사용량%·남은 시간"을 이 값 기준으로 표시하고,
+     * 지정 없이 state==='active'면 endDate에서 카드가 스스로 계산한다(pending인데
+     * 이 값도 없으면 = 한 번도 안 쓴 새 이용권 → 전체 기간이 그대로 남은 것으로 표시).
+     */
+    remainingSeconds?: number;
+    state?: PassCardState;
+    queueIndex?: number;
+    /** 배경 컴포넌트. 기본값: PassCardBgTwoCircle */
+    bg?: ReactNode;
+    /** true면 배경만 표시하고 콘텐츠(로고·플랜·카피라이트)를 숨김 */
+    bgOnly?: boolean;
+    /** --pass-card-text 색상 강제 지정 (PassCardBg 테마 override) */
+    textColor?: string;
+    /** --pass-card-sub 색상 강제 지정 (PassCardBg 테마 override) */
+    subColor?: string;
+    /** --pass-card-copyright 색상 강제 지정 (미지정 시 subColor 따름) */
+    copyrightColor?: string;
+    /** 로고 이미지 URL 직접 지정 (type 기반 기본값 override) */
+    logoSrc?: string;
+    /** 플랜 위에 작게 표시되는 라벨 (예: '오픈특가') */
+    label?: string;
+    /** 우측 하단에 표시되는 가격 (예: '₩9,900'). 지정하면 카피라이트 대신 가격을 표시. */
+    price?: string;
+    /** 현재가 왼쪽에 취소선으로 표시되는 원가 (예: '₩120,000') */
+    originalPrice?: string;
+    /** 우측 상단 할인 배지 (예: '50% 할인') */
+    discountLabel?: string;
+    /** 전달하면 클릭 시 메뉴 툴팁 표시 */
+    onUse?: () => void;
+    onRefund?: () => void;
+    onDelete?: () => void;
+}
+/** @public */
+export default function PassCard({ product, showPrice, plan, type, endDate, remainingSeconds, state, bg, bgOnly, textColor, subColor, copyrightColor, logoSrc, label, price, originalPrice, discountLabel, onUse, onRefund, onDelete }: PassCardProps): import("react").JSX.Element;