/*
 * 쿠폰고 폐쇠몰 — Components
 * Requires: tokens.css
 */

/* =========================================================
 * 1. Shell (sidebar + topbar + main)
 * ========================================================= */
.cm-shell {
    display: grid;
    /* minmax(0, 1fr) — 자식의 min-content가 트랙을 viewport 밖으로 밀어내는
       "grid blowout" 방지. 모든 fr 트랙에서 동일 패턴 사용. */
    grid-template-columns: var(--cm-sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--cm-topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    min-height: 100vh;
}

.cm-sidebar {
    grid-area: sidebar;
    background: var(--cm-surface);
    border-right: 1px solid var(--cm-line-200);
    padding: var(--cm-space-6) 0;
    position: sticky; top: 0;
    height: 100vh;
    overflow-y: auto;
}
.cm-sidebar-brand {
    display: flex; align-items: center; justify-content: center;
    height: 72px; margin-bottom: var(--cm-space-4);
    font-weight: 700; color: var(--cm-brand-500); font-size: 18px;
    letter-spacing: 0.02em;
}
.cm-sidebar-brand-mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--cm-brand-100); color: var(--cm-brand-500);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; margin-right: var(--cm-space-2);
}
.cm-sidebar-section {
    padding: var(--cm-space-2) var(--cm-space-5);
    color: var(--cm-ink-400);
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-top: var(--cm-space-4);
}
.cm-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--cm-space-3); }
.cm-nav-item {
    display: flex; align-items: center; gap: var(--cm-space-3);
    padding: 10px var(--cm-space-4);
    border-radius: var(--cm-radius-md);
    color: var(--cm-ink-700);
    font-size: 14px; font-weight: 500;
    position: relative;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cm-nav-item:hover { background: var(--cm-line-100); color: var(--cm-ink-900); text-decoration: none; }
.cm-nav-item.is-active {
    background: var(--cm-brand-100);
    color: var(--cm-brand-500);
    font-weight: 600;
}
.cm-nav-item.is-active::before {
    content: "";
    position: absolute; left: -12px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 2px 2px 0;
    background: var(--cm-brand-500);
}
.cm-nav-item .bi { font-size: 16px; color: currentColor; }
.cm-nav-item.is-disabled {
    color: var(--cm-ink-400);
    cursor: not-allowed;
    pointer-events: none;
}
.cm-nav-item.is-disabled:hover { background: transparent; color: var(--cm-ink-400); }
.cm-nav-item .cm-nav-soon {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--cm-line-100);
    color: var(--cm-ink-400);
    border-radius: var(--cm-radius-sm);
}

.cm-topbar {
    grid-area: topbar;
    background: var(--cm-surface);
    border-bottom: 1px solid var(--cm-line-200);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--cm-space-8);
    position: sticky; top: 0; z-index: 50;
}
.cm-topbar-title { font-size: 16px; font-weight: 600; color: var(--cm-ink-900); }
.cm-topbar-actions { display: flex; align-items: center; gap: var(--cm-space-4); }

.cm-main {
    grid-area: main;
    padding: var(--cm-space-6) var(--cm-space-8);
}

/* ========== 모바일 shell: off-canvas sidebar ========== */
.cm-shell-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.4);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.cm-shell-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* 더블 클래스로 specificity 0,2,0 — .cm-btn-icon (0,1,0)을 안전하게 덮어씀 */
.cm-btn-icon.cm-topbar-menu-toggle { display: none; }

@media (max-width: 991.98px) {
    .cm-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "topbar" "main";
    }
    .cm-sidebar {
        position: fixed;
        top: 0; left: 0;
        width: var(--cm-sidebar-w);
        height: 100vh;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        border-right: 1px solid var(--cm-line-200);
    }
    .cm-sidebar.is-open {
        transform: translateX(0);
    }
    .cm-topbar { padding: 0 var(--cm-space-4); }
    .cm-btn-icon.cm-topbar-menu-toggle { display: inline-flex; }
    .cm-main { padding: var(--cm-space-5) var(--cm-space-4); }
    .cm-page-title { font-size: 20px; }
}

@media (max-width: 575.98px) {
    .cm-main { padding: var(--cm-space-4) var(--cm-space-4); }
    .cm-page-header { flex-wrap: wrap; gap: var(--cm-space-3); }
    /* KPI 카드: 모바일에서 sparkline 숨기고 텍스트 영역만 */
    .cm-kpi-spark { display: none; }
    .cm-kpi-card { min-height: 96px; }
}

.cm-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--cm-space-6);
}
.cm-page-title { font-size: 22px; font-weight: 700; color: var(--cm-ink-900); margin: 0; }
.cm-page-subtitle { color: var(--cm-ink-500); font-size: 13px; margin-top: 2px; }


/* =========================================================
 * 2. Grid helper
 * ========================================================= */
.cm-grid {
    display: grid;
    /* minmax(0, 1fr) — grid blowout 방지 (자식 min-content가 트랙을 viewport 밖으로 밀어내는 현상) */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--cm-space-6);
    align-items: start;                     /* 같은 행 카드들을 top-line에 정렬 (stretch 방지) */
}
/* 그리드 안에 풀폭으로 들어가야 하는 헬퍼 컴포넌트 */
.cm-grid > .cm-empty,
.cm-grid > .cm-loading,
.cm-grid > .cm-error { grid-column: 1 / -1; }

/* =========================================================
 * 상품 그리드 전용 반응형 (FHD 기준 8열 목표)
 *
 * 기본 cm-grid(12 col)와 달리 상품 그리드는 독립적인 grid-template-columns
 * 을 가지며, 자식 요소에 cm-col-* 클래스를 붙이지 않는다.
 *
 * 브레이크포인트:
 *   xs  (<576)   : 2열
 *   sm  (576~)   : 3열
 *   md  (768~)   : 4열
 *   lg  (1200~)  : 6열 (1440 FHD 라이트에 적합)
 *   xl  (1600~)  : 7열 (FHD 와이드)
 *   xxl (1920~)  : 8열 (FHD 표준, 파트너사 담당자 주력 해상도)
 * ========================================================= */
.cm-grid-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cm-space-3);                                /* 12px, 기본 24 보다 타이트 */
}
/* grid children에 cm-col-3이 남아있으면 span 무효화 */
.cm-grid-products > .cm-col-3 { grid-column: auto; }

@media (min-width: 576px) {
    .cm-grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .cm-grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .cm-grid-products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
    .cm-grid-products { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 1920px) {
    .cm-grid-products { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.cm-grid-stretch { align-items: stretch; }  /* 같은 높이가 필요한 경우만 명시적 사용 */
.cm-col-12 { grid-column: span 12; }
.cm-col-9  { grid-column: span 9; }
.cm-col-8  { grid-column: span 8; }
.cm-col-6  { grid-column: span 6; }
.cm-col-4  { grid-column: span 4; }
.cm-col-3  { grid-column: span 3; }

/* 반응형 단계
 * lg+ (≥992)  : 자연 컬럼 (col-3 → 4열, col-4 → 3열)
 * md  (768~991): 2열 (KPI 2x2)
 * sm  (576~767): 2열 유지, col-6+ stack
 * xs  (<576)  : 1열 stack
 */
@media (max-width: 991.98px) {
    .cm-col-9, .cm-col-8, .cm-col-6 { grid-column: span 12; }
    .cm-col-4, .cm-col-3 { grid-column: span 6; }
}
@media (max-width: 575.98px) {
    .cm-col-4, .cm-col-3 { grid-column: span 12; }
}


/* =========================================================
 * 3. Card
 * ========================================================= */
.cm-card {
    background: var(--cm-surface);
    border-radius: var(--cm-radius-lg);
    border: 1px solid var(--cm-line-200);
    padding: var(--cm-space-6);
    position: relative;
}
/* hover 상승/테두리 변경은 opt-in (.is-hoverable) */
.cm-card.is-hoverable { transition: border-color .15s ease, transform .15s ease; }
.cm-card.is-hoverable:hover {
    border-color: #DADFE5;
    transform: translateY(-1px);
}
/* 디테일: 좌측 액센트 바 (선택적으로 .cm-card-accent-* 붙이기) */
.cm-card-accent-brand  { box-shadow: inset 3px 0 0 var(--cm-brand-500); }
.cm-card-accent-blue   { box-shadow: inset 3px 0 0 var(--cm-blue-500); }
.cm-card-accent-amber  { box-shadow: inset 3px 0 0 var(--cm-warning); }
.cm-card-accent-danger { box-shadow: inset 3px 0 0 var(--cm-danger); }
/* ❌ 제거: .cm-card + .cm-card { margin-top } — grid 내부에서 gap과 이중 적용되어
   row 1의 두 번째 카드만 24px 아래로 밀리는 버그를 유발함 (2026-04-15).
   그리드 외 세로 스택이 필요하면 .cm-mt-6 유틸리티를 명시적으로 쓸 것. */
.cm-card-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--cm-space-4);
    margin-bottom: var(--cm-space-5);
}
.cm-card-header > * { min-width: 0; }
.cm-card-header .demo-row,
.cm-card-header .cm-card-header-actions {
    flex-shrink: 0;
}
.cm-card-title { font-size: 16px; font-weight: 600; color: var(--cm-ink-900); margin: 0; }
.cm-card-subtitle { color: var(--cm-ink-500); font-size: 12px; margin-top: 2px; }
.cm-card-body {}
.cm-card-footer {
    margin-top: var(--cm-space-5);
    padding-top: var(--cm-space-4);
    border-top: 1px solid var(--cm-line-100);
    display: flex; justify-content: flex-end; gap: var(--cm-space-2);
}


/* =========================================================
 * 4. KPI card
 * ========================================================= */
.cm-kpi-card {
    background: var(--cm-surface);
    border-radius: var(--cm-radius-lg);
    border: 1px solid var(--cm-line-200);
    padding: var(--cm-space-5) var(--cm-space-6);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cm-space-4);
    min-height: 128px;
    overflow: hidden;               /* sparkline 예방용 안전장치 */
}
.cm-kpi-card .cm-kpi-body {
    flex: 1 1 auto;
    min-width: 0;                   /* flex 아이템 overflow 방지 */
}
.cm-kpi-card .cm-kpi-label {
    font-size: 12px; color: var(--cm-ink-500); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-kpi-card .cm-kpi-value {
    font-size: 26px; line-height: 32px; font-weight: 700;
    color: var(--cm-ink-900); letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cm-kpi-card .cm-kpi-value .cm-caption { font-weight: 500; color: var(--cm-ink-500); }
.cm-kpi-card .cm-kpi-sub { font-size: 12px; color: var(--cm-ink-500); margin-top: 6px; display: flex; align-items: center; gap: 6px; }

/* 고정 크기 sparkline wrapper — Chart.js responsive가 부모(wrapper) 크기만 참조 */
.cm-kpi-spark {
    flex: 0 0 128px;
    width: 128px;
    height: 72px;
    position: relative;
}
.cm-kpi-spark canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
@media (max-width: 1399.98px) {
    .cm-kpi-spark { flex-basis: 96px; width: 96px; height: 60px; }
}

.cm-trend-up, .cm-trend-down {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 12px; font-weight: 600;
    padding: 2px 6px; border-radius: var(--cm-radius-sm);
}
.cm-trend-up   { color: var(--cm-brand-500); background: var(--cm-brand-100); }
.cm-trend-down { color: var(--cm-danger);    background: var(--cm-danger-bg); }


/* =========================================================
 * 5. Badge
 * ========================================================= */
.cm-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--cm-radius-pill);
    font-size: 12px; font-weight: 600; line-height: 18px;
}
.cm-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.cm-badge-success { color: var(--cm-success); background: var(--cm-success-bg); }
.cm-badge-warning { color: var(--cm-warning); background: var(--cm-warning-bg); }
.cm-badge-danger  { color: var(--cm-danger);  background: var(--cm-danger-bg); }
.cm-badge-info    { color: var(--cm-info);    background: var(--cm-info-bg); }
.cm-badge-neutral { color: var(--cm-ink-500); background: var(--cm-line-100); }


/* =========================================================
 * 6. Buttons
 * ========================================================= */
.cm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 36px; padding: 0 var(--cm-space-4);
    border-radius: var(--cm-radius-md);
    font-size: 14px; font-weight: 600;
    border: 1px solid transparent;
    background: var(--cm-line-100); color: var(--cm-ink-700);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cm-btn:hover { background: var(--cm-line-200); }
.cm-btn-primary {
    background: var(--cm-brand-500); color: #fff; border-color: var(--cm-brand-500);
}
.cm-btn-primary:hover { background: var(--cm-brand-600); border-color: var(--cm-brand-600); }
.cm-btn-secondary {
    background: transparent; color: var(--cm-brand-500); border-color: var(--cm-brand-500);
}
.cm-btn-secondary:hover { background: var(--cm-brand-100); }
.cm-btn-ghost {
    background: transparent; color: var(--cm-ink-700); border-color: transparent;
}
.cm-btn-ghost:hover { background: var(--cm-line-100); }
.cm-btn-danger {
    background: var(--cm-danger); color: #fff; border-color: var(--cm-danger);
}
.cm-btn-danger:hover { filter: brightness(.92); }
.cm-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--cm-radius-sm); }
.cm-btn-lg { height: 44px; padding: 0 var(--cm-space-5); font-size: 15px; }
.cm-btn-icon {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cm-surface);
    border: 1px solid var(--cm-line-200);
    border-radius: var(--cm-radius-md);
    color: var(--cm-ink-700);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cm-btn-icon:hover {
    background: var(--cm-line-100);
    border-color: #DADFE5;
    color: var(--cm-ink-900);
}
.cm-btn-icon .bi {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    width: 16px; height: 16px;
    text-align: center;
}
/* 탑바·테이블 액션셀 등 경계가 필요 없는 곳 */
.cm-btn-icon.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--cm-ink-500);
}
.cm-btn-icon.ghost:hover {
    background: var(--cm-line-100);
    color: var(--cm-ink-900);
}
.cm-btn:disabled { opacity: .5; cursor: not-allowed; }


/* =========================================================
 * 7. Form
 * ========================================================= */
/* 폼 필드 wrapper — label/input/help 간격 일관성 */
.cm-field {
    display: flex; flex-direction: column;
    min-width: 0;
}
.cm-field + .cm-field { margin-top: 0; }
.cm-field .cm-label { margin-bottom: 6px; }
.cm-field .cm-input,
.cm-field .cm-select,
.cm-field .cm-textarea,
.cm-field .cm-input-group { margin-bottom: 4px; }
.cm-field .cm-help,
.cm-field .cm-error { margin-top: 0; min-height: 18px; }  /* 설명이 없어도 같은 공간 점유 */

.cm-label {
    display: block;
    font-size: 12px; font-weight: 600; color: var(--cm-ink-700);
    margin-bottom: 6px;
    height: 18px;   /* 라벨 높이 고정으로 row별 정렬 일치 */
}
.cm-input, .cm-select, .cm-textarea {
    display: block; width: 100%;
    height: 38px; padding: 0 12px;
    border-radius: var(--cm-radius-md);
    border: 1px solid var(--cm-line-200);
    background: var(--cm-surface);
    color: var(--cm-ink-900);
    font-size: 14px; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cm-textarea { height: auto; padding: 10px 12px; min-height: 96px; resize: vertical; }
.cm-input::placeholder, .cm-textarea::placeholder { color: var(--cm-ink-400); }
.cm-input:focus, .cm-select:focus, .cm-textarea:focus {
    outline: none;
    border-color: var(--cm-blue-500);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.cm-input-group {
    position: relative;
}
.cm-input-group .cm-input { padding-left: 36px; }
.cm-input-group > .bi {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--cm-ink-400); pointer-events: none;
}
.cm-help  { font-size: 12px; color: var(--cm-ink-500); margin-top: 4px; }
.cm-error { font-size: 12px; color: var(--cm-danger); margin-top: 4px; }

.cm-checkbox, .cm-radio {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--cm-ink-700); cursor: pointer;
}
.cm-checkbox input, .cm-radio input {
    appearance: none;
    width: 18px; height: 18px;
    border: 1px solid var(--cm-line-200);
    border-radius: 4px;
    background: var(--cm-surface);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.cm-radio input { border-radius: 50%; }
.cm-checkbox input:checked, .cm-radio input:checked {
    background: var(--cm-brand-500); border-color: var(--cm-brand-500);
}
.cm-checkbox input:checked::after {
    content: ""; width: 5px; height: 9px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, -1px);
}
.cm-radio input:checked::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff;
}

.cm-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.cm-switch input { opacity: 0; width: 0; height: 0; }
.cm-switch .cm-switch-slider {
    position: absolute; inset: 0; background: var(--cm-line-200);
    border-radius: 999px; cursor: pointer; transition: background .15s ease;
}
.cm-switch .cm-switch-slider::before {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    transition: transform .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.cm-switch input:checked + .cm-switch-slider { background: var(--cm-brand-500); }
.cm-switch input:checked + .cm-switch-slider::before { transform: translateX(16px); }

.cm-segmented {
    display: inline-flex; padding: 4px;
    background: var(--cm-line-100);
    border-radius: var(--cm-radius-md);
    gap: 2px;
}
.cm-segmented button {
    border: 0; background: transparent;
    font-size: 13px; font-weight: 500; color: var(--cm-ink-500);
    padding: 6px 14px; border-radius: var(--cm-radius-sm);
    cursor: pointer;
}
.cm-segmented button.is-active {
    background: var(--cm-surface); color: var(--cm-ink-900);
    border: 1px solid var(--cm-line-200);
}


/* =========================================================
 * 8. Table
 * ========================================================= */
.cm-table-wrap { overflow-x: auto; }
.cm-table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    background: var(--cm-surface);
}
.cm-table thead th {
    text-align: left;
    font-size: 11px; font-weight: 600;
    color: var(--cm-ink-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 16px;
    border-top: 1px solid var(--cm-line-200);
    border-bottom: 1px solid var(--cm-line-200);
    background: #FAFBFC;
    white-space: nowrap;
}
.cm-table thead th:first-child { border-top-left-radius: var(--cm-radius-md); border-bottom-left-radius: var(--cm-radius-md); border-left: 1px solid var(--cm-line-200); }
.cm-table thead th:last-child  { border-top-right-radius: var(--cm-radius-md); border-bottom-right-radius: var(--cm-radius-md); border-right: 1px solid var(--cm-line-200); }
.cm-table tbody td {
    padding: 14px 16px;
    font-size: 14px; color: var(--cm-ink-700);
    border-bottom: 1px solid var(--cm-line-100);
    vertical-align: middle;
}
.cm-table tbody tr:hover { background: var(--cm-blue-100); }
.cm-table tbody tr:last-child td { border-bottom: 0; }
.cm-table .cm-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.cm-table .cm-td-actions { text-align: right; white-space: nowrap; }


/* =========================================================
 * 9. Chart wrap / Donut / Legend
 * ========================================================= */
.cm-chart-wrap { position: relative; height: 240px; }
.cm-chart-wrap.sm { height: 160px; }
.cm-chart-wrap.lg { height: 320px; }

.cm-donut {
    position: relative;
    width: 160px; height: 160px;
    margin: 0 auto;
}
.cm-donut canvas { width: 100%; height: 100%; }
.cm-donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none;
}
.cm-donut-center .cm-donut-value { font-size: 24px; font-weight: 700; color: var(--cm-ink-900); }
.cm-donut-center .cm-donut-label { font-size: 12px; color: var(--cm-ink-500); }

.cm-legend {
    display: flex; flex-direction: column; gap: 8px;
    font-size: 13px;
}
.cm-legend-item { display: flex; align-items: center; gap: 8px; }
.cm-legend-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.cm-legend-label { color: var(--cm-ink-700); flex: 1; }
.cm-legend-value { color: var(--cm-ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }


/* =========================================================
 * 10. Progress
 * ========================================================= */
.cm-progress {
    display: flex; align-items: center; gap: 12px;
}
.cm-progress-track {
    flex: 1;
    height: 8px; border-radius: 999px;
    background: var(--cm-line-100);
    overflow: hidden;
}
.cm-progress.thin .cm-progress-track { height: 6px; }
.cm-progress.thick .cm-progress-track { height: 10px; }
.cm-progress-bar {
    height: 100%; border-radius: inherit;
    background: var(--cm-brand-500);
    transition: width .3s ease;
}
.cm-progress.info    .cm-progress-bar { background: var(--cm-info); }
.cm-progress.warning .cm-progress-bar { background: var(--cm-warning); }
.cm-progress-value {
    font-size: 12px; color: var(--cm-ink-500); font-weight: 600;
    min-width: 40px; text-align: right;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
 * 11. Avatar
 * ========================================================= */
.cm-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--cm-line-200);
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cm-ink-700);
    font-size: 12px; font-weight: 600;
    border: 2px solid var(--cm-surface);
}
.cm-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.cm-avatar-lg { width: 48px; height: 48px; font-size: 16px; }

.cm-avatar-stack { display: inline-flex; }
.cm-avatar-stack .cm-avatar + .cm-avatar { margin-left: -8px; }
.cm-avatar-stack .cm-avatar-more {
    background: var(--cm-brand-100); color: var(--cm-brand-500);
}


/* =========================================================
 * 12. Tabs & Pagination
 * ========================================================= */
.cm-tabs {
    display: flex; gap: var(--cm-space-5);
    border-bottom: 1px solid var(--cm-line-200);
    margin-bottom: var(--cm-space-5);
}
.cm-tab {
    padding: 10px 0;
    font-size: 14px; font-weight: 500;
    color: var(--cm-ink-500);
    background: none; border: 0; cursor: pointer;
    position: relative;
}
.cm-tab:hover { color: var(--cm-ink-900); }
.cm-tab.is-active { color: var(--cm-ink-900); font-weight: 600; }
.cm-tab.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--cm-brand-500); border-radius: 2px;
}

.cm-pagination {
    display: flex; align-items: center; gap: 4px;
    font-size: 13px;
}
.cm-pagination button {
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid transparent; background: transparent;
    border-radius: var(--cm-radius-sm);
    color: var(--cm-ink-700);
    font-size: 13px; font-weight: 500; cursor: pointer;
}
.cm-pagination button:hover:not(:disabled) { background: var(--cm-line-100); }
.cm-pagination button.is-active {
    background: var(--cm-brand-500); color: #fff;
}
.cm-pagination button:disabled { color: var(--cm-ink-400); cursor: not-allowed; }


/* =========================================================
 * 13. Empty / Skeleton / Toast
 * ========================================================= */
.cm-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--cm-space-10) var(--cm-space-6);
    text-align: center;
}
.cm-empty-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--cm-line-100);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cm-ink-400); font-size: 24px;
    margin-bottom: var(--cm-space-3);
}
.cm-empty-title { font-size: 15px; font-weight: 600; color: var(--cm-ink-900); }
.cm-empty-text  { font-size: 13px; color: var(--cm-ink-500); margin-top: 4px; margin-bottom: var(--cm-space-4); }

.cm-skeleton {
    background: linear-gradient(90deg, var(--cm-line-100) 0%, #EDF0F3 50%, var(--cm-line-100) 100%);
    background-size: 200% 100%;
    animation: cmShimmer 1.2s infinite linear;
    border-radius: var(--cm-radius-sm);
}
@keyframes cmShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.cm-toast {
    position: fixed; top: var(--cm-space-6); right: var(--cm-space-6);
    background: var(--cm-surface);
    border-radius: var(--cm-radius-md);
    border: 1px solid var(--cm-line-200);
    border-left: 3px solid var(--cm-brand-500);
    box-shadow: var(--cm-shadow-raised);   /* 떠있는 요소라 예외적으로 얕은 그림자 허용 */
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--cm-ink-900);
    z-index: 1000;
}


/* =========================================================
 * 14. Sidebar widgets (calendar & checklist)
 * ========================================================= */
.cm-calendar { font-size: 12px; color: var(--cm-ink-700); }
.cm-calendar-head {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; color: var(--cm-ink-900); font-size: 14px;
    margin-bottom: var(--cm-space-3);
}
.cm-calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 6px; text-align: center;
}
.cm-calendar-grid .cm-cal-dow { color: var(--cm-ink-400); font-weight: 600; padding: 4px 0; }
.cm-calendar-grid .cm-cal-day {
    height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cm-ink-700); cursor: pointer;
}
.cm-calendar-grid .cm-cal-day:hover { background: var(--cm-line-100); }
.cm-calendar-grid .cm-cal-day.is-muted { color: var(--cm-ink-400); }
.cm-calendar-grid .cm-cal-day.is-today {
    background: var(--cm-brand-500); color: #fff; font-weight: 700;
}

.cm-checklist { display: flex; flex-direction: column; gap: 10px; }
.cm-checklist .cm-checkbox input:checked ~ .cm-checklist-text {
    text-decoration: line-through; color: var(--cm-ink-400);
}
.cm-checklist-text { font-size: 13px; color: var(--cm-ink-700); }


/* =========================================================
 * 14a. Summary panel (사이드 요약 + 발송 액션)
 * ========================================================= */
.cm-summary-panel {
    background: var(--cm-surface);
    border: 1px solid var(--cm-line-200);
    border-radius: var(--cm-radius-lg);
    padding: var(--cm-space-5) var(--cm-space-6);
    position: sticky;
    top: 88px; /* 64px topbar + 24 여백 */
    box-shadow: inset 3px 0 0 var(--cm-brand-500);
}
.cm-summary-panel .cm-summary-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cm-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--cm-space-3);
}
.cm-summary-row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: var(--cm-space-2) 0;
    border-bottom: 1px dashed var(--cm-line-100);
    font-size: 13px;
}
.cm-summary-row:last-of-type { border-bottom: 0; }
.cm-summary-row .cm-summary-key { color: var(--cm-ink-500); }
.cm-summary-row .cm-summary-val {
    color: var(--cm-ink-900);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cm-summary-row.is-emphasis {
    padding-top: var(--cm-space-3);
    margin-top: var(--cm-space-2);
    border-top: 1px solid var(--cm-line-200);
    border-bottom: 0;
}
.cm-summary-row.is-emphasis .cm-summary-key { font-size: 13px; }
.cm-summary-row.is-emphasis .cm-summary-val {
    font-size: 22px; line-height: 28px;
    color: var(--cm-brand-500);
}
.cm-summary-warning {
    margin-top: var(--cm-space-4);
    padding: var(--cm-space-3);
    background: var(--cm-warning-bg);
    color: #92400E;
    font-size: 12px;
    border-radius: var(--cm-radius-sm);
    display: flex;
    gap: 8px;
}

/* 폼/모달에서 인라인 에러 박스 — JS에서 display 토글 */
.cm-error-box {
    padding: var(--cm-space-3);
    background: var(--cm-danger-bg);
    color: var(--cm-danger);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--cm-radius-sm);
    margin-bottom: var(--cm-space-3);
}
.cm-summary-actions {
    margin-top: var(--cm-space-4);
}
.cm-summary-terms {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: var(--cm-space-3);
    font-size: 12px;
    color: var(--cm-ink-700);
    cursor: pointer;
}
.cm-summary-terms input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

/* =========================================================
 * 14b. Sticky bottom bar (모바일 발송 패널 변형)
 * ========================================================= */
.cm-sticky-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: var(--cm-surface);
    border-top: 1px solid var(--cm-line-200);
    padding: var(--cm-space-3) var(--cm-space-4);
    display: none;
    flex-direction: column;
    gap: var(--cm-space-2);
    box-shadow: 0 -4px 12px rgba(16, 24, 40, .06);
}
.cm-sticky-bar-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cm-space-2);
}
.cm-sticky-bar-total {
    font-size: 12px; color: var(--cm-ink-500);
}
.cm-sticky-bar-total strong {
    display: block;
    font-size: 18px; font-weight: 700;
    color: var(--cm-ink-900);
}
.cm-sticky-bar .cm-summary-terms { margin: 0; }

@media (max-width: 991.98px) {
    .cm-sticky-bar { display: flex; }
    .cm-summary-panel.cm-only-desktop { display: none; }
    /* 모바일에서 메인 콘텐츠 하단에 sticky bar 만큼 여백 확보 */
    .cm-main.cm-has-sticky-bar { padding-bottom: 140px; }
}

/* =========================================================
 * 14c. Modal (오버레이 + 카드)
 * ========================================================= */
.cm-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, 0.5);
    z-index: 1060;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cm-space-4);
}
.cm-modal-backdrop.is-active {
    opacity: 1; pointer-events: auto;
}
.cm-modal {
    background: var(--cm-surface);
    border-radius: var(--cm-radius-xl);
    box-shadow: var(--cm-shadow-modal);
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    transform: translateY(8px) scale(.98);
    transition: transform .2s ease;
}
.cm-modal-backdrop.is-active .cm-modal {
    transform: translateY(0) scale(1);
}
.cm-modal-header {
    padding: var(--cm-space-5) var(--cm-space-6);
    border-bottom: 1px solid var(--cm-line-200);
    display: flex; align-items: center; justify-content: space-between;
}
.cm-modal-title {
    font-size: 16px; font-weight: 700;
    color: var(--cm-ink-900);
    margin: 0;
}
.cm-modal-body {
    padding: var(--cm-space-5) var(--cm-space-6);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.cm-modal-footer {
    padding: var(--cm-space-4) var(--cm-space-6);
    border-top: 1px solid var(--cm-line-200);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cm-space-3);
    flex-wrap: wrap;
}
.cm-modal-footer-info { font-size: 13px; color: var(--cm-ink-500); }

@media (max-width: 575.98px) {
    .cm-modal { max-height: calc(100vh - 32px); }
    .cm-modal-header, .cm-modal-body, .cm-modal-footer { padding: var(--cm-space-4); }
}

/* =========================================================
 * 14d. Product tabs (선택된 상품을 가로 탭으로)
 * ========================================================= */
/* ─── 발송 상품 카드 탭 (가로 스크롤) ─── */
.cm-product-tabs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: var(--cm-space-2);
    margin-bottom: var(--cm-space-4);
    scrollbar-width: none;
}
.cm-product-tabs::-webkit-scrollbar { display: none; }

.cm-product-tab {
    flex: 0 0 200px;
    background: var(--cm-surface);
    border: 2px solid var(--cm-line-200);
    border-radius: var(--cm-radius-lg);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}
.cm-product-tab:hover {
    border-color: #DADFE5;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.cm-product-tab.is-active {
    border-color: var(--cm-brand-500);
    box-shadow: 0 0 0 1px var(--cm-brand-500);
}
/* 활성 표시 하단 바 */
.cm-product-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--cm-brand-500);
}

/* 카드 이미지 영역 */
.cm-product-tab .cm-tab-img {
    width: 100%;
    height: 100px;
    background: #F5F7FA;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.cm-product-tab .cm-tab-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cm-product-tab .cm-tab-img .bi {
    font-size: 32px;
    color: #CBD5E1;
}
/* 수신자 수 배지 (이미지 우상단) */
.cm-product-tab .cm-tab-badge {
    position: absolute;
    top: 6px; right: 6px;
    padding: 2px 8px;
    background: var(--cm-brand-500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--cm-radius-pill);
    line-height: 16px;
}
.cm-product-tab .cm-tab-badge.is-empty {
    background: var(--cm-ink-400);
}

/* 카드 본문 */
.cm-product-tab .cm-tab-body {
    padding: 10px 12px;
}
.cm-product-tab .cm-tab-brand {
    font-size: 10px;
    font-weight: 600;
    color: var(--cm-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-product-tab .cm-tab-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--cm-ink-900);
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.cm-product-tab .cm-tab-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--cm-ink-900);
    font-variant-numeric: tabular-nums;
}
.cm-product-tab .cm-tab-price .cm-tab-discount {
    color: var(--cm-danger);
    font-size: 11px;
    margin-right: 4px;
}
.cm-product-tab .cm-tab-price .cm-tab-original {
    color: var(--cm-ink-400);
    font-size: 10px;
    text-decoration: line-through;
    font-weight: 500;
    margin-left: 4px;
}

/* 제거 버튼 */
.cm-product-tab .cm-tab-remove {
    position: absolute;
    top: 6px; left: 6px;
    width: 22px; height: 22px;
    border: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 2;
}
.cm-product-tab:hover .cm-tab-remove { opacity: 1; }
.cm-product-tab .cm-tab-remove:hover {
    background: var(--cm-danger);
}

/* =========================================================
 * 14e. Recipient table (수신자 입력 — cm-table 변형)
 * ========================================================= */
.cm-recipient-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.cm-recipient-table thead th {
    text-align: left;
    font-size: 11px; font-weight: 600;
    color: var(--cm-ink-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cm-line-200);
    background: #FAFBFC;
    white-space: nowrap;
}
.cm-recipient-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--cm-line-100);
    vertical-align: middle;
}
.cm-recipient-table .cm-recipient-num {
    width: 40px;
    text-align: center;
    color: var(--cm-ink-400);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.cm-recipient-table input.cm-input {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    border-color: transparent;
    background: transparent;
}
.cm-recipient-table input.cm-input:focus {
    background: var(--cm-surface);
    border-color: var(--cm-blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.cm-recipient-table .cm-recipient-actions {
    width: 36px;
    text-align: center;
}
.cm-recipient-table tbody tr.is-error input.cm-input {
    background: var(--cm-danger-bg);
}
.cm-recipient-empty {
    padding: var(--cm-space-6);
    text-align: center;
    color: var(--cm-ink-400);
    font-size: 13px;
}
/* 수신자 다건 입력 — 스크롤 박스(높이 고정) + 헤더 고정 */
.cm-recipient-scroll {
    max-height: 420px;
    overflow-y: auto;
}
.cm-recipient-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;          /* 스크롤 시 입력 행 위로 고정 헤더 노출 */
}
/* 검색/필터 툴바 */
.cm-recipient-toolbar .cm-input-group { margin: 0; }
.cm-recipient-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--cm-ink-700);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
/* 오류 건수 배지 (클릭 = '오류만 보기' 토글) */
.cm-recipient-error-badge {
    display: none;        /* 오류 0건이면 숨김 (JS가 inline-flex 로 토글) */
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    border: 0;
    border-radius: var(--cm-radius-pill);
    background: var(--cm-danger-bg);
    color: var(--cm-danger);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    vertical-align: middle;
}
.cm-recipient-error-badge:hover { filter: brightness(0.96); }

/* =========================================================
 * 14f. Product card selectable (모달 안에서 체크박스로 선택)
 * ========================================================= */
.cm-product-card.is-selectable { cursor: pointer; }
/* 선택 표시: border 두께 변경 (1→2px). outline은 z-index를 무시하고 다른 요소 위에
   그려져서 선택 섹션까지 녹색 빗금처럼 비치는 아티팩트를 유발 → border로 교체.
   1px 차이로 인한 레이아웃 시프트는 box-sizing: border-box 덕에 내부만 영향. */
.cm-product-card.is-selected {
    border: 2px solid var(--cm-brand-500);
}
.cm-product-card .cm-product-check {
    position: absolute;
    top: 8px; left: 8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cm-surface);
    border: 2px solid var(--cm-line-200);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: transparent;
    z-index: 2;
}
.cm-product-card.is-selected .cm-product-check {
    background: var(--cm-brand-500);
    border-color: var(--cm-brand-500);
    color: #fff;
}

/* =========================================================
 * 14b. Product card (쿠폰 상품)
 * ========================================================= */
.cm-product-card {
    background: var(--cm-surface);
    border: 1px solid var(--cm-line-200);
    border-radius: var(--cm-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
}
.cm-product-card:hover {
    border-color: #DADFE5;
    transform: translateY(-2px);
}

.cm-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--cm-line-100);
    display: flex; align-items: center; justify-content: center;
    overflow: visible;     /* 브랜드 마크가 하단으로 넘쳐도 잘리지 않도록 */
}
.cm-product-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--cm-radius-lg) var(--cm-radius-lg) 0 0;   /* 카드 상단 라운드에 맞춤 */
}
.cm-product-image .bi {
    font-size: 56px;
    color: rgba(255, 255, 255, 0.75);
}

/* 디스카운트 배지 (이미지 우상단) */
.cm-product-discount-badge {
    position: absolute;
    top: 10px; right: 10px;
    padding: 4px 10px;
    background: var(--cm-danger);
    color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--cm-radius-pill);
    letter-spacing: 0.02em;
    line-height: 14px;
}

/* 브랜드 마크 (이미지-본문 경계에 걸침) */
.cm-product-brand-mark {
    position: absolute;
    left: 16px;
    bottom: -18px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cm-surface);
    border: 3px solid var(--cm-surface);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .10);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    color: var(--cm-ink-900);
}
.cm-product-brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.cm-product-body {
    padding: 26px 16px 18px;   /* 상단은 브랜드 마크가 걸친 공간 확보 */
}
.cm-product-brand {
    font-size: 11px;
    color: var(--cm-ink-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.cm-product-name {
    font-size: 14px;
    color: var(--cm-ink-900);
    font-weight: 600;
    line-height: 20px;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}
.cm-product-price-row {
    display: flex; align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.cm-product-discount {
    font-size: 13px; font-weight: 700;
    color: var(--cm-danger);
}
.cm-product-price-final {
    font-size: 18px; font-weight: 700;
    color: var(--cm-ink-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.cm-product-price-original {
    font-size: 12px;
    color: var(--cm-ink-400);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.cm-product-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--cm-line-100);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; color: var(--cm-ink-500);
}

/* Compact variant — 기본 대비 약 50% 면적, 6열 그리드에 최적화 */
.cm-product-card.compact .cm-product-image {
    aspect-ratio: 1 / 1;
}
.cm-product-card.compact .cm-product-image .bi {
    font-size: 36px;
}
.cm-product-card.compact .cm-product-discount-badge {
    top: 6px; right: 6px;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 13px;
}
.cm-product-card.compact .cm-product-brand-mark {
    width: 32px;
    height: 32px;
    left: 10px;
    bottom: -14px;
    border-radius: 9px;
    border-width: 2px;
    font-size: 11px;
}
.cm-product-card.compact .cm-product-body {
    padding: 20px 12px 12px;
}
.cm-product-card.compact .cm-product-brand {
    font-size: 10px;
    margin-bottom: 2px;
}
.cm-product-card.compact .cm-product-name {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 8px;
    min-height: 34px;
}
.cm-product-card.compact .cm-product-discount {
    font-size: 11px;
}
.cm-product-card.compact .cm-product-price-final {
    font-size: 14px;
}
.cm-product-card.compact .cm-product-price-original {
    font-size: 11px;
}
.cm-product-card.compact .cm-product-card-footer {
    padding: 8px 12px;
    font-size: 10px;
}
.cm-product-card.compact .cm-product-card-footer .cm-badge {
    padding: 1px 7px;
    font-size: 10px;
    line-height: 14px;
}
/* 12-column grid 에서 2열 wide는 16.6% (col-2) — 6개 per row */
.cm-col-2  { grid-column: span 2; }
@media (max-width: 991.98px) {
    .cm-col-2 { grid-column: span 6; }
}

/* ──────────────────────────────────────────────────────
 * XS variant — FHD 기준 8열 그리드용 초컴팩트 카드
 * 패딩/브랜드마크/타이포 축소, 푸터 숨김, 총 높이 ~220px
 * ────────────────────────────────────────────────────── */
.cm-product-card.xs .cm-product-image .bi {
    font-size: 32px;
}
.cm-product-card.xs .cm-product-discount-badge {
    top: 4px; right: 4px;
    padding: 2px 6px;
    font-size: 9px;
    line-height: 12px;
}
.cm-product-card.xs .cm-product-brand-mark {
    width: 52px;
    height: 52px;
    left: 8px;
    bottom: -24px;
    border-radius: 12px;
    border-width: 3px;
    font-size: 14px;
}
.cm-product-card.xs .cm-product-body {
    padding: 30px 10px 10px;     /* 상단: 브랜드 마크(52px, -24px offset)가 걸치는 공간 확보 */
}
.cm-product-card.xs .cm-product-brand {
    font-size: 9px;
    margin-bottom: 1px;
    letter-spacing: 0.03em;
}
.cm-product-card.xs .cm-product-name {
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 6px;
    min-height: 30px;
}
.cm-product-card.xs .cm-product-price-row {
    gap: 4px 6px;
}
.cm-product-card.xs .cm-product-discount {
    font-size: 10px;
}
.cm-product-card.xs .cm-product-price-final {
    font-size: 13px;
    letter-spacing: 0;
}
.cm-product-card.xs .cm-product-price-original {
    font-size: 10px;
}
.cm-product-card.xs .cm-product-card-footer {
    display: none;
}
.cm-product-card.xs .cm-product-check {
    width: 20px;
    height: 20px;
    top: 6px;
    left: 6px;
    border-width: 2px;
    font-size: 11px;
}

/* ──────────────────────────────────────────────────────
 * 피드백 애니메이션 (Q7)
 * 원칙: 장식 아닌 피드백 — "무슨 일이 일어났는지" 알려주는 motion
 * ────────────────────────────────────────────────────── */

/* 1) 체크마크 스프링-인 (카드 선택 시 뿅! 하고 튀어나옴) */
.cm-product-card .cm-product-check {
    transform: scale(0);
    transition: transform .3s cubic-bezier(.68, -0.55, .27, 1.55),
                background .2s ease, border-color .2s ease, color .2s ease;
}
.cm-product-card.is-selected .cm-product-check {
    transform: scale(1);
}

/* 2) 카드 선택 시 살짝 축소 (눌린 느낌) */
.cm-product-card.is-selectable {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cm-product-card.is-selectable:hover {
    transform: translateY(-2px);
}
.cm-product-card.is-selectable.is-selected {
    transform: scale(.97);
}
.cm-product-card.is-selectable.is-selected:hover {
    transform: scale(.97) translateY(-2px);
}

/* 3) 카드 스태거 fade-in (검색 결과 순차 등장) */
@keyframes cm-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.cm-grid-products > * {
    animation: cm-card-in .25s ease-out backwards;
}
/* 스태거 지연 (최대 24개까지, 그 이후는 동시에 표시) */
.cm-grid-products > *:nth-child(1)  { animation-delay: 0ms; }
.cm-grid-products > *:nth-child(2)  { animation-delay: 15ms; }
.cm-grid-products > *:nth-child(3)  { animation-delay: 30ms; }
.cm-grid-products > *:nth-child(4)  { animation-delay: 45ms; }
.cm-grid-products > *:nth-child(5)  { animation-delay: 60ms; }
.cm-grid-products > *:nth-child(6)  { animation-delay: 75ms; }
.cm-grid-products > *:nth-child(7)  { animation-delay: 90ms; }
.cm-grid-products > *:nth-child(8)  { animation-delay: 105ms; }
.cm-grid-products > *:nth-child(9)  { animation-delay: 120ms; }
.cm-grid-products > *:nth-child(10) { animation-delay: 135ms; }
.cm-grid-products > *:nth-child(11) { animation-delay: 150ms; }
.cm-grid-products > *:nth-child(12) { animation-delay: 165ms; }
.cm-grid-products > *:nth-child(13) { animation-delay: 180ms; }
.cm-grid-products > *:nth-child(14) { animation-delay: 195ms; }
.cm-grid-products > *:nth-child(15) { animation-delay: 210ms; }
.cm-grid-products > *:nth-child(16) { animation-delay: 225ms; }
.cm-grid-products > *:nth-child(n+17) { animation-delay: 240ms; }

/* 4) 카운터 bump (숫자 바뀔 때 살짝 커졌다 돌아옴 + 브랜드 색) */
@keyframes cm-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.2); color: var(--cm-brand-500); }
    100% { transform: scale(1); }
}
.cm-bump {
    animation: cm-bump .35s ease;
    display: inline-block;
}

/* 5) 선택 상품 섹션 — cm-selected-section 제거, 인라인 스타일로 이관 */
/* 미니 카드 등장 애니메이션 제거 — 스크롤 렌더링 아티팩트 방지 */

/* ──────────────────────────────────────────────────────
 * 선택된 상품 — 완전 새 구조 (cm-pick-*)
 * CSS 변수·디자인 시스템 의존 최소화, 렌더링 아티팩트 방지
 * ────────────────────────────────────────────────────── */
/* 컨테이너에 display:flex 를 사용하지 않음 — Chrome에서 flex + overflow-x:auto +
   scrollbar-width:none 조합이 배경에 렌더링 아티팩트(빗금 패턴)를 만드는 버그 회피.
   대신 white-space:nowrap + inline-flex 아이템으로 가로 스크롤 구현. */
.cm-pick-row {
    overflow-x: auto;
    white-space: nowrap;
    padding: 4px 0;
    min-height: 68px;
    scrollbar-width: none;
    font-size: 0;
    cursor: grab;
    user-select: none;
}
.cm-pick-row::-webkit-scrollbar { display: none; }
.cm-pick-row.is-grabbing { cursor: grabbing; }
.cm-pick-row.is-grabbing * { pointer-events: none; }

/* 좌우 화살표 네비게이터 */
.cm-pick-wrap {
    position: relative;
}
.cm-pick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.cm-pick-wrap:hover .cm-pick-arrow.is-visible,
.cm-pick-arrow.is-visible:focus {
    opacity: 1;
    pointer-events: auto;
}
.cm-pick-arrow-left {
    left: 0;
    background: linear-gradient(to right, #FFFFFF 60%, transparent);
    padding-left: 4px;
}
.cm-pick-arrow-right {
    right: 0;
    background: linear-gradient(to left, #FFFFFF 60%, transparent);
    padding-right: 4px;
}
.cm-pick-arrow .bi {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.cm-pick-arrow:hover .bi {
    border-color: #00A651;
    color: #00A651;
}

.cm-pick-item {
    display: inline-flex;      /* flex child → inline-flex (부모가 block) */
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #FFFFFF;
    white-space: nowrap;
    vertical-align: top;
    margin-right: 8px;         /* gap 대체 (부모 flex가 아니므로 gap 사용 불가) */
    font-size: 12px;           /* 부모 font-size:0 리셋 */
}
.cm-pick-item:last-child { margin-right: 0; }
.cm-pick-item img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #F1F3F5;
}
.cm-pick-item .pick-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7);
    font-size: 20px;
    flex-shrink: 0;
}
.cm-pick-item .pick-info { line-height: 1.5; min-width: 0; overflow: hidden; }
.cm-pick-item .pick-brand {
    font-size: 10px; color: #9CA3AF; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    overflow: hidden; text-overflow: ellipsis;
}
.cm-pick-item .pick-name {
    font-size: 12px; color: #1F2937; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.cm-pick-item .pick-price {
    font-size: 12px; color: #00A651; font-weight: 700;
}
.cm-pick-item .pick-remove {
    border: 0; background: none; cursor: pointer;
    color: #9CA3AF; font-size: 16px; padding: 4px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.cm-pick-item .pick-remove:hover {
    color: #EF4444; background: #FEE2E2;
}

/* placeholder (0개) */
.cm-pick-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    min-height: 68px;
    color: #9CA3AF;
    font-size: 13px;
    background: #F5F7FA;
    border-radius: 10px;
}

/* 접근성: reduce motion 선호 시 모든 애니메이션 off */
@media (prefers-reduced-motion: reduce) {
    .cm-product-card,
    .cm-product-check,
    .cm-grid-products > *,
    .cm-bump {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
 * 15. Utilities (subset)
 * ========================================================= */
.cm-flex       { display: flex; }
.cm-flex-col   { display: flex; flex-direction: column; }
.cm-items-center { align-items: center; }
.cm-justify-between { justify-content: space-between; }
.cm-gap-1 { gap: var(--cm-space-1); }
.cm-gap-2 { gap: var(--cm-space-2); }
.cm-gap-3 { gap: var(--cm-space-3); }
.cm-gap-4 { gap: var(--cm-space-4); }
.cm-gap-6 { gap: var(--cm-space-6); }
.cm-mt-2 { margin-top: var(--cm-space-2); }
.cm-mt-4 { margin-top: var(--cm-space-4); }
.cm-mt-6 { margin-top: var(--cm-space-6); }
.cm-mb-2 { margin-bottom: var(--cm-space-2); }
.cm-mb-4 { margin-bottom: var(--cm-space-4); }
.cm-mb-6 { margin-bottom: var(--cm-space-6); }
.cm-text-ink-500 { color: var(--cm-ink-500); }
.cm-text-brand   { color: var(--cm-brand-500); }
.cm-text-right   { text-align: right; }
.cm-w-full       { width: 100%; }