/* ===================================================
   ROUNZ Matching — Toss/Apple Refined
   (2026-06-30 디자인 토큰 + 컴포넌트 리뉴얼)
   =================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
    /* ─────────── Base ─────────── */
    --m-bg:           #f7f8fa;        /* 페이지 배경 — 살짝 회색감 */
    --m-bg-soft:      #f7f8fa;
    --m-surface:      #ffffff;
    --m-surface-2:    #f3f4f6;
    --m-surface-3:    #e9ebef;
    --m-ink:          #1a1d24;        /* 가장 진한 텍스트 */
    --m-text:         #1a1d24;
    --m-text-soft:    #6b7280;
    --m-text-mute:    #9ca3af;
    --m-line:         #e5e7eb;
    --m-line-soft:    #f1f2f4;
    --m-line-strong:  #d1d5db;

    /* ─────────── Accent — ROUNZ Electric Blue ─────────── */
    --m-accent:       #1729EC;
    --m-accent-soft:  #edefff;        /* 활성 메뉴/포커스 배경 */
    --m-accent-deep:  #1120c9;        /* hover, soft 배경 위 텍스트 */
    --m-accent-darker:#0b16a0;

    /* ─────────── Status ─────────── */
    --m-error:        #ef4444;
    --m-error-soft:   #fef2f2;
    --m-error-deep:   #b91c1c;
    --m-success:      #10b981;
    --m-success-soft: #ecfdf5;
    --m-success-deep: #047857;
    --m-warning:      #f59e0b;
    --m-warning-soft: #fffbeb;
    --m-warning-deep: #b45309;
    --m-origin:       #ef4444;
    --m-origin-soft:  #fff5f5;

    /* ─────────── Radius — 토스는 라운드를 큼직하게 ─────────── */
    --m-r-xs: 6px;
    --m-r-sm: 10px;
    --m-r-md: 14px;
    --m-r-lg: 18px;
    --m-r-xl: 24px;
    --m-r-2xl: 28px;

    /* ─────────── Shadow — 계층화 ─────────── */
    --m-shadow-xs:         0 1px 2px rgba(11,15,23,0.04);
    --m-shadow-card:       0 1px 3px rgba(11,15,23,0.04), 0 1px 2px rgba(11,15,23,0.03);
    --m-shadow-card-hover: 0 6px 24px rgba(11,15,23,0.06), 0 2px 6px rgba(11,15,23,0.04);
    --m-shadow-pop:        0 12px 48px rgba(11,15,23,0.12), 0 4px 12px rgba(11,15,23,0.06);
    --m-shadow-focus:      0 0 0 4px var(--m-accent-soft);

    /* ─────────── Motion ─────────── */
    --m-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --m-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --m-t-fast: 120ms var(--m-ease);
    --m-t-base: 200ms var(--m-ease);
    --m-t-slow: 320ms var(--m-ease);

    --m-header-h: 64px;
    --m-sidebar-w: 240px;
    --m-content-max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    background: var(--m-bg); color: var(--m-text);
    font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
    font-feature-settings: 'tnum' on, 'ss01' on;
    text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.92em; background: var(--m-surface-2); padding: 1px 5px; border-radius: 4px; }

/* 스크롤바 — 미세 커스텀 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--m-line-strong); border-radius: 99px; border: 2px solid var(--m-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--m-text-mute); }

/* ============================== 레이아웃 ============================== */
body.m-layout { min-height: 100vh; display: flex; flex-direction: column; }

.m-header {
    height: var(--m-header-h);
    background: rgba(255,255,255,0.72);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--m-line-soft);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px; position: sticky; top: 0; z-index: 50; flex-shrink: 0;
}
.m-header__left { display: flex; align-items: center; gap: 16px; }
.m-header__right { display: flex; align-items: center; gap: 12px; }
.m-header__menu-toggle {
    display: none; background: transparent; border: none;
    padding: 8px; border-radius: var(--m-r-sm); color: var(--m-text);
    transition: var(--m-t-fast);
}
.m-header__menu-toggle:hover { background: var(--m-surface-2); }
.m-brand {
    font-weight: 800; font-size: 19px; letter-spacing: -0.028em; color: #1729EC;
}
.m-brand__suffix { color: var(--m-text-mute); font-weight: 600; margin-left: 4px; }
.m-header__user { display: flex; align-items: center; gap: 10px; padding-right: 4px; }
.m-header__store { font-weight: 600; font-size: 13px; color: var(--m-text); }
.m-header__role-badge {
    background: var(--m-surface-2); color: var(--m-text);
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px;
    letter-spacing: 0.01em;
}

.m-shell { display: flex; flex: 1; min-height: 0; }
.m-sidebar {
    width: var(--m-sidebar-w);
    background: transparent;
    border-right: 1px solid var(--m-line-soft);
    padding: 22px 14px; flex-shrink: 0; overflow-y: auto;
}
.m-nav__section-label {
    font-size: 11px; font-weight: 700; color: var(--m-text-mute);
    letter-spacing: 0.08em; padding: 0 12px 14px;
    text-transform: uppercase;
}
.m-nav__item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: var(--m-r-sm);
    color: var(--m-text); font-weight: 600; font-size: 13.5px;
    transition: var(--m-t-fast); margin-bottom: 2px;
}
.m-nav__item:hover {
    background: var(--m-surface-2);
    color: var(--m-text);
}
.m-nav__item.is-active {
    background: var(--m-accent-soft);
    color: var(--m-accent-deep);
}
.m-nav__item.is-active .m-nav__icon { opacity: 1; color: var(--m-accent); }
.m-nav__icon { display: inline-flex; color: var(--m-text-soft); opacity: 0.85; flex-shrink: 0; }
.m-nav__divider { height: 1px; background: var(--m-line-soft); margin: 14px 6px; }

.m-main { flex: 1; min-width: 0; background: var(--m-bg); }
.m-main__inner { max-width: var(--m-content-max); margin: 0 auto; padding: 36px 32px 80px; }
.m-backdrop { position: fixed; inset: 0; background: rgba(11,15,23,0.40); z-index: 40; display: none; }
.m-backdrop.is-visible { display: block; }

@media (max-width: 900px) {
    .m-header__menu-toggle { display: inline-flex; }
    .m-header { padding: 0 16px; }
    .m-sidebar {
        position: fixed; left: 0; top: var(--m-header-h);
        height: calc(100vh - var(--m-header-h)); z-index: 45;
        background: var(--m-surface); transform: translateX(-100%);
        transition: transform var(--m-t-base);
        box-shadow: var(--m-shadow-pop);
    }
    .m-sidebar.is-open { transform: translateX(0); }
    .m-main__inner { padding: 22px 16px 40px; }
}

/* ============================== 공통 컴포넌트 ============================== */

/* Buttons — 토스는 hover에서 translate 없이 색만 미세하게 */
.m-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--m-ink); color: white; border: none;
    padding: 12px 22px; border-radius: var(--m-r-sm);
    font-weight: 700; font-size: 14px; letter-spacing: -0.011em;
    transition: var(--m-t-fast);
    line-height: 1;
}
.m-btn:hover { background: #2a2f3a; }
.m-btn:active { transform: scale(0.98); }
.m-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.m-btn--primary { background: var(--m-accent); color: white; }
.m-btn--primary:hover { background: var(--m-accent-deep); }
.m-btn--ghost {
    background: var(--m-surface); color: var(--m-text);
    border: 1px solid var(--m-line);
}
.m-btn--ghost:hover { background: var(--m-surface-2); border-color: var(--m-line-strong); }
.m-btn--sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.m-btn--lg { padding: 15px 24px; font-size: 15px; border-radius: 12px; }
.m-btn--full { width: 100%; }

/* Card */
.m-card {
    background: var(--m-surface); border-radius: var(--m-r-lg);
    padding: 24px;
    box-shadow: var(--m-shadow-card);
    border: 1px solid var(--m-line-soft);
}
.m-card--padless { padding: 0; }

/* Page header — 토스풍 큰 헤드라인 */
.m-page-title {
    font-size: 30px; font-weight: 800; color: var(--m-ink);
    letter-spacing: -0.032em; margin: 0 0 8px;
    line-height: 1.2;
}
.m-page-sub {
    font-size: 14.5px; color: var(--m-text-soft); margin-bottom: 32px;
    letter-spacing: -0.005em;
}

.m-section-title {
    font-size: 12px; font-weight: 700; color: var(--m-text-soft);
    letter-spacing: 0.04em; text-transform: uppercase;
    margin: 0 0 14px;
}

/* Input / Select */
.m-input, .m-select {
    width: 100%; padding: 12px 14px;
    background: var(--m-surface); color: var(--m-text);
    border: 1px solid var(--m-line); border-radius: var(--m-r-sm);
    font-size: 14px; transition: var(--m-t-fast);
    line-height: 1.4;
}
.m-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
    font-weight: 600;
}
.m-input::placeholder { color: var(--m-text-mute); }
.m-input:hover, .m-select:hover { border-color: var(--m-line-strong); }
.m-input:focus, .m-select:focus {
    outline: none; border-color: var(--m-accent);
    box-shadow: var(--m-shadow-focus);
}

.m-checkbox {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 13.5px; color: var(--m-text); user-select: none;
}
.m-checkbox input { width: 16px; height: 16px; accent-color: var(--m-accent); cursor: pointer; }

.m-slider { width: 100%; accent-color: var(--m-accent); }

/* ============================== Metric — 토스풍 강조 ============================== */
.m-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}
.m-metric {
    position: relative;
    background: var(--m-surface);
    border-radius: var(--m-r-lg);
    padding: 18px 20px 20px;
    border: 1px solid var(--m-line-soft);
    transition: var(--m-t-fast);
}
.m-metric:hover {
    border-color: var(--m-line);
    transform: translateY(-1px);
    box-shadow: var(--m-shadow-card-hover);
}
.m-metric__label {
    font-size: 12.5px;
    color: var(--m-text-soft);
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.m-metric__value {
    font-size: 28px;
    font-weight: 800;
    color: var(--m-ink);
    letter-spacing: -0.028em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.m-metric__suffix {
    font-size: 14px; color: var(--m-text-soft); font-weight: 600; margin-left: 2px;
}
@media (max-width: 700px) {
    .m-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .m-metric { padding: 14px 16px 16px; }
    .m-metric__value { font-size: 24px; }
}

/* Progress bar */
.m-progress {
    display: grid; grid-template-columns: 120px 1fr 52px;
    gap: 14px; align-items: center;
    font-size: 13px; padding: 6px 0;
}
.m-progress__label { color: var(--m-text); font-weight: 600; }
.m-progress__track {
    height: 6px; background: var(--m-surface-2); border-radius: 99px; overflow: hidden;
}
.m-progress__fill {
    height: 100%; background: var(--m-accent); border-radius: 99px;
    transition: width 400ms var(--m-ease-out);
}
.m-progress__fill.is-low { background: var(--m-warning); }
.m-progress__fill.is-zero { background: var(--m-line-strong); }
.m-progress__pct { text-align: right; color: var(--m-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Chips */
.m-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 99px;
    font-size: 12px; font-weight: 700;
}
.m-chip--on { background: var(--m-accent); color: white; }
.m-chip--off { background: var(--m-surface-2); color: var(--m-text-mute); }
.m-chip__w { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 11px; }

/* Dropzone */
.m-dropzone {
    background: var(--m-surface-2);
    border: 1.5px dashed var(--m-line-strong);
    border-radius: var(--m-r-lg);
    padding: 36px 24px;
    text-align: center; cursor: pointer; transition: var(--m-t-base);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.m-dropzone:hover, .m-dropzone.is-dragover {
    background: var(--m-accent-soft);
    border-color: var(--m-accent);
    border-style: solid;
}
.m-dropzone__icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--m-surface); display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--m-text-soft);
    box-shadow: var(--m-shadow-card);
    transition: var(--m-t-fast);
}
.m-dropzone:hover .m-dropzone__icon, .m-dropzone.is-dragover .m-dropzone__icon {
    color: var(--m-accent); transform: scale(1.05);
}
.m-dropzone__title { font-weight: 700; color: var(--m-text); font-size: 14.5px; }
.m-dropzone__hint { color: var(--m-text-soft); font-size: 12.5px; }
.m-dropzone__hint b { color: var(--m-text); font-weight: 700; }
.m-dropzone input[type=file] { display: none; }
.m-dropzone__file {
    margin-top: 4px; font-size: 13px; color: var(--m-accent-deep);
    font-weight: 700;
}

/* Compact filter row */
.m-filter-row {
    display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
    padding: 14px 18px;
    background: var(--m-surface-2);
    border-radius: var(--m-r-md);
    margin-bottom: 14px;
}
.m-filter-row__group {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 220px;
}
.m-filter-row__label { font-size: 12.5px; color: var(--m-text-soft); font-weight: 600; }

/* ============================== Toolbar ============================== */
.m-toolbar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.m-toolbar__spacer { flex: 1; }

/* ============================== Store ============================== */
.m-store {
    background: var(--m-surface); border-radius: var(--m-r-xl);
    padding: 24px 24px 22px; margin: 18px 0;
    border: 1px solid var(--m-line-soft);
    box-shadow: var(--m-shadow-card);
}
.m-store__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 18px;
    padding-bottom: 14px; border-bottom: 1px solid var(--m-line-soft);
}
.m-store__name { font-size: 19px; font-weight: 800; color: var(--m-ink); letter-spacing: -0.022em; }
.m-store__stats { font-size: 12.5px; color: var(--m-text-mute); font-weight: 600; }

/* Recommendation row */
.m-row { margin: 14px 0; }
.m-row__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    gap: 12px;
}

.m-rec {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-lg); overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--m-shadow-card);
    transition: var(--m-t-base);
}
.m-rec:hover {
    box-shadow: var(--m-shadow-card-hover);
    border-color: var(--m-line);
    transform: translateY(-2px);
}
.m-rec.is-origin {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-left: 4px solid var(--m-origin);
    box-shadow: var(--m-shadow-card);
    position: relative;
}
.m-rec.is-origin:hover { transform: none; box-shadow: var(--m-shadow-card); }
.m-rec.is-origin .m-rec__img {
    background: transparent;
}

/* Selected card highlight (점주가 채택한 카드) */
.m-rec.is-selected {
    border: 2px solid var(--m-success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.10);
    transform: translateY(-2px);
}
.m-rec.is-selected .m-rec__badge {
    background: var(--m-success);
}

.m-rec__img {
    width: 100%; aspect-ratio: 1 / 1; background: var(--m-surface-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--m-text-mute); font-size: 11px;
    object-fit: contain;
    padding: 10px;
}
.m-rec__body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; }
.m-rec__badge {
    align-self: flex-start;
    background: var(--m-ink); color: white;
    padding: 3px 9px; border-radius: 99px;
    font-weight: 700; font-size: 11px;
    letter-spacing: 0.01em;
}
.m-rec.is-origin .m-rec__badge { background: var(--m-origin); }
.m-rec__brand { font-size: 10.5px; color: var(--m-text-mute); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.m-rec__name { font-size: 13.5px; font-weight: 700; color: var(--m-text); line-height: 1.35; word-break: break-word; }
.m-rec__info { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.m-pill {
    font-size: 11px; font-weight: 700; padding: 3px 8px;
    border-radius: 6px;
}
.m-pill--price { background: var(--m-surface-2); color: var(--m-text); }
.m-pill--stock { background: var(--m-success-soft); color: var(--m-success-deep); }
.m-shipped-badge {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 6px;
    background: var(--m-success); color: white;
}
.m-pill--compete { background: var(--m-warning-soft); color: var(--m-warning-deep); }

/* Fallback level badges */
.m-fb {
    align-self: flex-start; margin-bottom: 4px;
    font-size: 10.5px; font-weight: 700;
    padding: 3px 8px; border-radius: 6px;
    letter-spacing: 0.01em;
    display: inline-flex; align-items: center; gap: 4px;
}
.m-fb--loose-price { background: #fff7ed; color: #c2410c; }
.m-fb--loose-store { background: #fef3c7; color: #92400e; }
.m-fb--visual     { background: #fef2f2; color: #b91c1c; }
.m-rec.is-fallback { opacity: 0.97; }
.m-rec.is-fb-visual {
    background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
    border-color: #fde2e2;
}
/* 추천 이유 — 박스가 아니라 따뜻한 한마디처럼 (설득 문구는 데이터 필드처럼 보이면 안 됨) */
.m-rec__reason {
    display: flex; align-items: flex-start; gap: 5px;
    margin-top: 6px;
    font-size: 12px; line-height: 1.45;
    color: var(--m-accent-deep); font-weight: 600;
}
.m-rec__reason::before {
    content: '';
    flex-shrink: 0; margin-top: 6px;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--m-accent);
}

/* Adopt button — 명확한 CTA. 토스식 진한 액센트로 "눌러서 확정" 신호를 확실히 줌 */
.m-adopt-btn {
    margin-top: 10px; padding: 10px 12px;
    background: var(--m-accent); color: white;
    border: 1px solid var(--m-accent); border-radius: var(--m-r-sm);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: var(--m-t-fast); width: 100%;
    letter-spacing: -0.01em;
}
.m-adopt-btn:hover {
    background: var(--m-accent-deep); border-color: var(--m-accent-deep);
}
.m-adopt-btn:active { transform: scale(0.98); }
.m-adopt-btn.is-adopted {
    background: var(--m-success); color: white;
    border-color: var(--m-success);
}
.m-adopt-btn.is-adopted:hover { background: var(--m-success-deep); border-color: var(--m-success-deep); }
.m-adopt-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Empty / Fail */
.m-empty {
    background: var(--m-surface-2); border-radius: var(--m-r-md);
    padding: 24px; text-align: center; color: var(--m-text-mute); font-size: 13px;
}

.m-fail {
    background: var(--m-error-soft); border: 1px solid #fecaca;
    border-radius: var(--m-r-sm); padding: 10px 14px;
    font-size: 12.5px; color: var(--m-error-deep); margin: 6px 0;
}

/* Empty state — 토스/애플 톤 */
.m-empty-state {
    padding: 80px 24px;
    text-align: center;
    color: var(--m-text-soft);
}
.m-empty-state__illus {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--m-surface-2);
    color: var(--m-text-mute);
    margin-bottom: 18px;
}
.m-empty-state__icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.6;
    filter: grayscale(0.3);
}
.m-empty-state__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--m-ink);
    margin-bottom: 8px;
    letter-spacing: -0.022em;
}
.m-empty-state__desc {
    font-size: 13.5px;
    color: var(--m-text-soft);
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto;
}

/* ============================== Unlearned items dialog ============================== */
.m-modal--wide {
    max-width: 640px;
}
.m-modal__title {
    display: flex; align-items: center; gap: 10px;
}
.m-unlearn__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--m-warning-soft);
    color: var(--m-warning-deep);
    flex-shrink: 0;
}
.m-unlearn-section {
    background: var(--m-surface-2);
    border-radius: var(--m-r-md);
    padding: 14px 16px;
    margin-top: 14px;
}
.m-unlearn-section__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.m-unlearn-section__badge {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    letter-spacing: 0.01em;
}
.m-unlearn-section__badge--warn {
    background: var(--m-warning-soft);
    color: var(--m-warning-deep);
}
.m-unlearn-section__badge--error {
    background: var(--m-error-soft);
    color: var(--m-error-deep);
}
.m-unlearn-section__count {
    font-size: 13px;
    font-weight: 700;
    color: var(--m-text);
    font-variant-numeric: tabular-nums;
}
.m-unlearn-section__desc {
    font-size: 12px;
    color: var(--m-text-soft);
    line-height: 1.5;
    margin-bottom: 10px;
}
.m-unlearn-list {
    list-style: none;
    padding: 0; margin: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: 8px;
}
.m-unlearn-list li {
    display: grid;
    grid-template-columns: 120px 80px 1fr;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--m-line-soft);
    align-items: center;
}
.m-unlearn-list li:last-child { border-bottom: 0; }
.m-unlearn-list__store {
    color: var(--m-text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-unlearn-list__brand {
    color: var(--m-text-mute);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-unlearn-list__name {
    color: var(--m-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-unlearn-list__more {
    color: var(--m-text-mute);
    font-style: italic;
    text-align: center;
    font-size: 11.5px;
    grid-template-columns: 1fr !important;
}

@media (max-width: 600px) {
    .m-unlearn-list li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}
/* ============================== 정상 출고 섹션 (store 화면) ============================== */
.m-normal-section {
    background: var(--m-success-soft);
    border: 1px solid #bbf0d5;
    border-radius: var(--m-r-lg);
    margin-bottom: 16px;
    overflow: hidden;
}
.m-normal-section__toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 14px 18px;
    background: transparent; border: none;
    cursor: pointer; text-align: left;
    transition: var(--m-t-fast);
}
.m-normal-section__toggle:hover { background: rgba(255,255,255,0.4); }
.m-normal-section__toggle svg:first-child { color: var(--m-success-deep); flex-shrink: 0; }
.m-normal-section__toggle span:nth-child(2) {
    font-size: 13.5px; font-weight: 700; color: var(--m-success-deep);
}
.m-normal-section__hint {
    font-size: 12px; color: var(--m-text-soft); font-weight: 500;
    flex: 1;
}
.m-normal-section__chev {
    color: var(--m-success-deep); flex-shrink: 0;
    transition: transform var(--m-t-fast);
}
.m-normal-section__toggle.is-open .m-normal-section__chev { transform: rotate(180deg); }
.m-normal-section__body {
    padding: 4px 18px 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.m-normal-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    transition: var(--m-t-fast);
}
.m-normal-row:hover { background: rgba(255,255,255,0.5); }
.m-normal-row__name { color: var(--m-text); font-weight: 600; }
.m-normal-row__brand {
    color: var(--m-text-mute); font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.03em; margin-right: 6px;
}
.m-normal-row__price {
    color: var(--m-text-soft); font-weight: 600; font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .m-normal-section__toggle { flex-wrap: wrap; }
    .m-normal-section__hint { flex-basis: 100%; margin-left: 26px; }
}

.m-header__alert {
    position: relative;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--m-surface-2);
    color: var(--m-text);
    text-decoration: none;
    transition: var(--m-t-fast);
}
.m-header__alert:hover {
    background: var(--m-accent-soft);
    color: var(--m-accent-deep);
}
.m-header__alert-count {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--m-error);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--m-surface);
    font-variant-numeric: tabular-nums;
}

/* ============================== Session card (store + dashboard 공통) ============================== */
.m-session,
.m-dash-session {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-lg);
    margin-bottom: 14px;
    overflow: hidden;
    transition: var(--m-t-fast);
}
.m-session:hover,
.m-dash-session:hover {
    border-color: var(--m-line);
}

.m-session__head,
.m-dash-session__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: var(--m-t-fast);
    gap: 12px;
}
.m-session__head:hover,
.m-dash-session__head:hover {
    background: var(--m-surface-2);
}
.m-session__head-left,
.m-dash-session__head-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.m-session__head-right,
.m-dash-session__head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.m-session__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--m-text);
    letter-spacing: -0.011em;
}
.m-session__date {
    font-size: 12.5px;
    color: var(--m-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-session__progress {
    font-size: 13px;
    color: var(--m-text-soft);
    font-variant-numeric: tabular-nums;
    min-width: 92px;
    text-align: right;
    font-weight: 600;
}
.m-session__badge {
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.m-session__badge--pending {
    background: var(--m-error-soft);
    color: var(--m-error-deep);
}
.m-session__badge--done {
    background: var(--m-success-soft);
    color: var(--m-success-deep);
}
.m-session__chevron {
    font-size: 10px;
    color: var(--m-text-mute);
    width: 14px;
    text-align: center;
}
.m-session__body,
.m-dash-session__body {
    padding: 14px 20px 20px;
    border-top: 1px solid var(--m-line-soft);
}
.m-session__loading {
    padding: 30px;
    text-align: center;
    color: var(--m-text-soft);
    font-size: 13px;
}

/* ============================== Dashboard — 매장별 진행률 ============================== */
.m-dash__last-updated {
    font-size: 11.5px;
    color: var(--m-text-mute);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.m-dash__export-btn, .m-dash__delete-btn { flex-shrink: 0; }
.m-dash__delete-btn:hover { color: var(--m-error-deep) !important; }

.m-dash-stores {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.m-dash-store {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr 64px 52px 18px;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--m-surface-2);
    border-radius: var(--m-r-sm);
    border-left: 3px solid var(--m-line-strong);
    transition: var(--m-t-fast);
}
.m-dash-store.is-clickable { cursor: pointer; }
.m-dash-store.is-clickable:hover { background: var(--m-surface-3); }
.m-dash-store.is-untouched { border-left-color: var(--m-error); }
.m-dash-store.is-progress  { border-left-color: var(--m-warning); }
.m-dash-store.is-done      { border-left-color: var(--m-success); opacity: 0.78; }
.m-dash-store.is-done.is-clickable { opacity: 1; }
.m-dash-store__chev {
    color: var(--m-text-mute);
    font-size: 14px;
    text-align: center;
    transition: transform var(--m-t-fast);
}
.m-dash-store__chev.is-open { transform: rotate(180deg); color: var(--m-text); }

.m-dash-store-wrap {
    display: flex; flex-direction: column;
}
.m-dash-store__detail {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-top: none;
    border-radius: 0 0 var(--m-r-sm) var(--m-r-sm);
    margin: -4px 0 4px 12px;
    padding: 16px;
}
.m-dash-store__detail-loading {
    padding: 24px;
    text-align: center;
    color: var(--m-text-soft);
    font-size: 13px;
}

/* ============================== 매장별 매칭 상세 ============================== */
.m-match-list {
    display: flex; flex-direction: column; gap: 8px;
}
.m-match {
    display: grid;
    grid-template-columns: 1fr 36px 1fr 90px 118px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--m-surface-2);
    border-radius: var(--m-r-sm);
}
.m-match.is-shipped {
    background: var(--m-success-soft);
}
.m-match--pending {
    background: var(--m-surface);
    border: 1px dashed var(--m-line-strong);
    opacity: 0.78;
}
.m-match--normal {
    background: #fff;
    border: 1px solid var(--m-line-soft);
}
.m-match--normal.is-shipped {
    background: var(--m-success-soft);
    border-color: #bbf0d5;
}
.m-match__from, .m-match__to {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: center;
    min-width: 0;
}
.m-match__from-img, .m-match__to-img {
    width: 44px; height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    display: flex; align-items: center; justify-content: center;
}
.m-match__img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.m-match__img-empty {
    font-size: 18px;
    color: var(--m-text-mute);
}
.m-match__from-text, .m-match__to-text {
    min-width: 0;
}
.m-match__from-brand, .m-match__to-brand {
    font-size: 10px;
    color: var(--m-text-mute);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.m-match__from-name, .m-match__to-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0;
}
.m-match__from-meta, .m-match__to-meta {
    font-size: 11.5px;
    color: var(--m-text-soft);
    font-variant-numeric: tabular-nums;
}
.m-match__arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--m-success);
}
.m-match__arrow--pending {
    color: var(--m-text-mute);
    font-size: 11px;
    font-weight: 700;
    background: var(--m-surface-2);
    padding: 4px 8px;
    border-radius: 99px;
}
.m-match__to--pending {
    color: var(--m-text-mute);
    font-size: 12px;
    font-style: italic;
    grid-column: span 1;
}
.m-match__meta {
    font-size: 11px;
    color: var(--m-text-mute);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.m-match__by {
    font-weight: 700;
    color: var(--m-text-soft);
}
.m-match__at {
    margin-top: 2px;
}
.m-match__divider {
    font-size: 11px;
    color: var(--m-text-mute);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 4px 4px;
    border-top: 1px solid var(--m-line-soft);
    margin-top: 4px;
}
.m-match__divider--normal {
    color: var(--m-success-deep);
}

/* 출고완료 버튼 */
.m-ship-btn {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 10px;
    background: var(--m-surface);
    border: 1px solid var(--m-line-strong);
    border-radius: 8px;
    font-size: 11.5px; font-weight: 700;
    color: var(--m-text-soft);
    cursor: pointer;
    transition: var(--m-t-fast);
    white-space: nowrap;
}
.m-ship-btn:hover {
    background: var(--m-ink); color: white; border-color: var(--m-ink);
}
.m-ship-btn.is-shipped {
    background: var(--m-success); color: white; border-color: var(--m-success);
}
.m-ship-btn.is-shipped:hover {
    background: var(--m-success-deep); border-color: var(--m-success-deep);
}
.m-ship-btn .m-spinner {
    width: 12px; height: 12px; border-width: 2px;
}

/* 세션 헤더의 출고 진행률 배지 */
.m-session__badge--ship {
    background: var(--m-warning-soft);
    color: var(--m-warning-deep);
}

@media (max-width: 700px) {
    .m-dash-store {
        grid-template-columns: 1fr 52px 18px;
        gap: 6px;
    }
    .m-dash-store__bar, .m-dash-store__stat {
        grid-column: 1 / -1;
    }
    .m-match {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .m-match__arrow {
        transform: rotate(90deg);
    }
    .m-match__meta {
        text-align: left;
    }
    .m-ship-btn {
        width: 100%;
        padding: 10px;
    }
}

.m-dash-store__name {
    font-weight: 600;
    font-size: 13px;
    color: var(--m-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-dash-store__bar {
    height: 6px;
    background: var(--m-line);
    border-radius: 99px;
    overflow: hidden;
}
.m-dash-store__bar-fill {
    height: 100%;
    background: var(--m-success);
    border-radius: 99px;
    transition: width 320ms var(--m-ease-out);
}
.m-dash-store.is-untouched .m-dash-store__bar-fill { background: var(--m-error); }
.m-dash-store.is-progress .m-dash-store__bar-fill  { background: var(--m-warning); }

.m-dash-store__stat {
    font-size: 12px;
    color: var(--m-text-soft);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.m-dash-store__pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--m-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .m-session__head-right,
    .m-dash-session__head-right {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .m-session__progress { min-width: 72px; font-size: 12px; }
}

/* Spinner */
.m-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--m-line-strong);
    border-top-color: var(--m-accent);
    border-radius: 50%;
    animation: m-spin 700ms linear infinite;
    vertical-align: middle;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ============================== Settings panel ============================== */
.m-settings {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-lg);
    margin-bottom: 18px;
    overflow: hidden;
}
.m-settings__toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 14px 20px;
    background: transparent; border: none;
    cursor: pointer; transition: var(--m-t-fast);
}
.m-settings__toggle:hover { background: var(--m-surface-2); }
.m-settings__toggle-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700; color: var(--m-text);
    flex: 1;
}
.m-settings__toggle-status {
    font-size: 12px; color: var(--m-text-mute); font-weight: 600;
}
.m-settings__toggle-arrow {
    color: var(--m-text-mute); transition: transform var(--m-t-base);
}
.m-settings.is-open .m-settings__toggle-arrow { transform: rotate(180deg); }
.m-settings__body {
    display: none; padding: 8px 22px 22px;
    border-top: 1px solid var(--m-line-soft);
}
.m-settings.is-open .m-settings__body { display: block; }
.m-settings__group { padding: 16px 0; }
.m-settings__group + .m-settings__group { border-top: 1px solid var(--m-line-soft); }
.m-settings__group-title {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 14px;
}
.m-settings__group-title > span:first-child {
    font-size: 13.5px; font-weight: 700; color: var(--m-text);
}
.m-settings__group-help {
    font-size: 11.5px; color: var(--m-text-mute);
}
.m-settings__row {
    display: grid; grid-template-columns: 200px 1fr 80px;
    gap: 14px; align-items: center;
    padding: 8px 0;
}
.m-settings__row-label {
    display: flex; flex-direction: column;
    font-size: 13px; font-weight: 600; color: var(--m-text);
}
.m-settings__row-label small {
    font-size: 11px; color: var(--m-text-mute); font-weight: 500; margin-top: 2px;
}
.m-settings__row-value {
    text-align: right;
    font-size: 14px; font-weight: 800; color: var(--m-ink);
    font-variant-numeric: tabular-nums;
}
.m-settings__row-value.is-changed { color: var(--m-accent-deep); }
.m-settings__weight-row {
    display: grid; grid-template-columns: 180px 1fr 50px;
    gap: 12px; align-items: center;
    padding: 6px 0; font-size: 13px;
}
.m-settings__actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 16px; border-top: 1px solid var(--m-line-soft);
    margin-top: 8px;
}
@media (max-width: 700px) {
    .m-settings__row, .m-settings__weight-row { grid-template-columns: 1fr; }
}

/* ============================== Modal ============================== */
.m-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(11,15,23,0.50);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: m-fade-in 200ms var(--m-ease-out);
}
@keyframes m-fade-in { from { opacity: 0; } to { opacity: 1; } }

.m-modal {
    background: var(--m-surface);
    border-radius: var(--m-r-xl);
    padding: 28px;
    max-width: 460px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--m-shadow-pop);
    animation: m-modal-in 280ms var(--m-ease-out);
}
@keyframes m-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.m-modal__title {
    font-size: 19px; font-weight: 800; color: var(--m-ink);
    letter-spacing: -0.024em; margin-bottom: 6px;
}
.m-modal__sub {
    font-size: 13.5px; color: var(--m-text-soft);
    line-height: 1.55; margin-bottom: 20px;
}
.m-modal__field {
    margin-bottom: 14px;
}
.m-modal__field-label {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--m-text-soft);
    font-weight: 600; margin-bottom: 6px;
}
.m-modal__field-status {
    font-size: 11px; padding: 2px 8px; border-radius: 99px;
    font-weight: 700; letter-spacing: 0.01em;
}
.m-modal__field-status.is-ok { background: var(--m-success-soft); color: var(--m-success-deep); }
.m-modal__field-status.is-need { background: var(--m-warning-soft); color: var(--m-warning-deep); }
.m-modal__footer {
    display: flex; gap: 10px; margin-top: 22px;
    padding-top: 18px; border-top: 1px solid var(--m-line-soft);
}
.m-modal__footer .m-btn { flex: 1; }

/* ============================== Store summary table ============================== */
.m-summary {
    background: var(--m-surface); border-radius: var(--m-r-xl);
    border: 1px solid var(--m-line-soft); padding: 6px 0;
    margin: 0 0 18px; overflow: hidden;
    box-shadow: var(--m-shadow-card);
}
.m-summary__header {
    display: grid; grid-template-columns: 1fr 90px 90px 100px 90px;
    gap: 8px; padding: 14px 22px 12px;
    font-size: 11px; color: var(--m-text-mute);
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    border-bottom: 1px solid var(--m-line-soft);
}
.m-summary__row {
    display: grid; grid-template-columns: 1fr 90px 90px 100px 90px;
    gap: 8px; padding: 13px 22px;
    font-size: 13.5px; cursor: pointer;
    transition: var(--m-t-fast);
    border-bottom: 1px solid var(--m-line-soft);
    align-items: center;
}
.m-summary__row:last-child { border-bottom: 0; }
.m-summary__row:hover { background: var(--m-surface-2); }
.m-summary__row.is-active { background: var(--m-accent-soft); }
.m-summary__row.is-active .m-summary__name { color: var(--m-accent-deep); font-weight: 800; }
.m-summary__name {
    color: var(--m-text); font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-summary__cell { color: var(--m-text-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.m-summary__cell--num  { color: var(--m-text); font-weight: 700; }

/* 매칭률 — 텍스트 대신 필 배지로 (토스 시그니처 스타일) */
.m-summary__cell--good, .m-summary__cell--warn, .m-summary__cell--bad {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 9px; border-radius: 99px;
    font-size: 12px; font-weight: 800;
    margin-left: auto;
}
.m-summary__cell--good { background: var(--m-success-soft); color: var(--m-success-deep); }
.m-summary__cell--warn { background: var(--m-warning-soft); color: var(--m-warning-deep); }
.m-summary__cell--bad  { background: var(--m-error-soft);   color: var(--m-error-deep); }

.m-summary__sticky-foot {
    display: flex; gap: 10px; align-items: center;
    padding: 13px 22px; background: var(--m-surface-2);
    border-top: 1px solid var(--m-line-soft);
    font-size: 12px; color: var(--m-text-soft);
}
.m-summary__sticky-foot .m-input {
    max-width: 220px; padding: 8px 12px; font-size: 13px;
}
.m-store-nav {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin: 0 0 18px;
}
@media (max-width: 700px) {
    .m-summary__header, .m-summary__row {
        grid-template-columns: 1fr 60px 70px;
    }
    .m-summary__cell--hide-sm { display: none; }
}

/* ============================== Compare Modal ============================== */
.m-cmp-backdrop {
    position: fixed; inset: 0;
    background: rgba(11,15,23,0.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 120;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: m-fade-in 200ms var(--m-ease-out);
}
.m-cmp {
    background: var(--m-surface);
    border-radius: var(--m-r-2xl);
    box-shadow: var(--m-shadow-pop);
    max-width: 980px; width: 100%;
    max-height: 92vh; overflow: hidden;
    display: flex; flex-direction: column;
    animation: m-modal-in 280ms var(--m-ease-out);
}
.m-cmp__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--m-line-soft);
}
.m-cmp__title { font-size: 17px; font-weight: 800; color: var(--m-ink); letter-spacing: -0.022em; }
.m-cmp__nav-info { font-size: 12.5px; color: var(--m-text-mute); font-weight: 600; }
.m-cmp__close {
    background: transparent; border: none; padding: 8px;
    border-radius: 8px; color: var(--m-text-soft); cursor: pointer;
    display: inline-flex; transition: var(--m-t-fast);
}
.m-cmp__close:hover { background: var(--m-surface-2); color: var(--m-text); }

.m-cmp__body {
    flex: 1; overflow-y: auto;
    display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
    .m-cmp__body { grid-template-columns: 1fr; }
}

.m-cmp__side { padding: 22px 24px; }
.m-cmp__side:first-child {
    background: var(--m-surface);
    border-right: 1px solid var(--m-line-soft);
    border-left: 4px solid var(--m-origin);
    position: relative;
}
@media (max-width: 700px) {
    .m-cmp__side:first-child { border-right: 0; border-bottom: 1px solid var(--m-line-soft); }
}

.m-cmp__side-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: 99px;
    font-size: 11px; font-weight: 800;
    margin-bottom: 12px; letter-spacing: 0.02em;
}
.m-cmp__side--origin .m-cmp__side-badge { background: var(--m-origin); color: white; }
.m-cmp__side--cand .m-cmp__side-badge { background: var(--m-ink); color: white; }

.m-cmp__img-wrap {
    background: var(--m-surface); border-radius: var(--m-r-md);
    aspect-ratio: 1 / 1; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    border: 1px solid var(--m-line-soft);
}
.m-cmp__img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.m-cmp__img-empty { color: var(--m-text-mute); font-size: 13px; }

.m-cmp__brand { font-size: 11px; color: var(--m-text-mute); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.m-cmp__name { font-size: 18px; font-weight: 800; color: var(--m-ink); line-height: 1.3; margin: 4px 0 12px; letter-spacing: -0.022em; }

.m-cmp__score-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.m-cmp__attrs {
    background: var(--m-surface); border-radius: var(--m-r-md);
    overflow: hidden; border: 1px solid var(--m-line-soft);
}
.m-cmp__side--origin .m-cmp__attrs { background: var(--m-surface-2); }
.m-cmp__attr {
    display: grid; grid-template-columns: 90px 1fr;
    gap: 10px; padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--m-line-soft);
}
.m-cmp__attr:last-child { border-bottom: 0; }
.m-cmp__attr-label { color: var(--m-text-mute); font-weight: 700; font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; align-self: center; }
.m-cmp__attr-val { color: var(--m-text); font-weight: 700; }
.m-cmp__attr-val.is-same { color: var(--m-success-deep); font-weight: 700; }
.m-cmp__attr-val.is-diff { color: var(--m-text); font-weight: 700; }
.m-cmp__attr-val.is-cheaper { color: var(--m-success-deep); font-weight: 700; }
.m-cmp__attr-val.is-pricier { color: var(--m-warning-deep); font-weight: 700; }
.m-cmp__attr-val.is-empty { color: var(--m-text-mute); font-weight: 500; font-style: italic; }
.m-cmp__attr-tag {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 4px; margin-left: 6px;
    background: var(--m-line-soft); color: var(--m-text-mute);
    letter-spacing: 0.01em;
}
.m-cmp__attr-tag--same {
    background: var(--m-success-soft); color: var(--m-success-deep);
}
.m-cmp__attr-tag--cheaper {
    background: var(--m-success-soft); color: var(--m-success-deep);
}
.m-cmp__attr-tag--pricier {
    background: var(--m-warning-soft); color: var(--m-warning-deep);
}

.m-cmp__cta { display: flex; gap: 8px; margin-top: 14px; }

.m-cmp__foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-top: 1px solid var(--m-line-soft);
    background: var(--m-surface-2);
    gap: 12px;
}
.m-cmp__nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--m-surface); color: var(--m-text);
    border: 1px solid var(--m-line); border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: var(--m-t-fast);
}
.m-cmp__nav-btn:hover:not(:disabled) { background: var(--m-ink); color: white; border-color: var(--m-ink); }
.m-cmp__nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.m-cmp__dots { display: flex; gap: 5px; }
.m-cmp__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--m-line-strong); transition: var(--m-t-fast);
}
.m-cmp__dot.is-active { background: var(--m-accent); width: 22px; border-radius: 99px; }

/* 카드 사진에 hover 시 비교 힌트 (bulk 화면 — 본사는 PC로만 사용) */
.m-rec__img-link {
    cursor: zoom-in; position: relative; display: block;
}
.m-rec__img-link::after {
    content: '🔍'; position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(11,15,23,0.72); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; opacity: 0;
    transition: var(--m-t-fast);
}
.m-rec__img-link:hover::after { opacity: 1; }

/* 이미지 래퍼 — 클릭 불가, 단순 표시용 (store 화면) */
.m-rec__img-wrap { display: block; }

/* 비교하기 버튼 — hover 없이 항상 보임 (모바일 대응, 발견성 확보) */
.m-cmp-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 8px;
    padding: 8px 10px;
    background: var(--m-surface); color: var(--m-accent-deep);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-sm);
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: var(--m-t-fast);
}
.m-cmp-btn:hover {
    background: var(--m-surface-2);
    border-color: var(--m-accent);
}
.m-cmp-btn svg { flex-shrink: 0; }

/* 더보기 — 추천#1 카드 바로 오른쪽에 붙는 얇은 세로 탭.
   그리드 트랙 폭은 다른 카드와 같지만(minmax 공유), 내용은 얇게 중앙 정렬해서
   "카드"가 아니라 "펼치기 손잡이"처럼 보이게 함. 카드 높이만큼 늘어남(align-self:stretch). */
.m-rec--more {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    align-self: stretch;
    gap: 6px;
    background: var(--m-surface-2);
    border: 1px dashed var(--m-line);
    border-radius: var(--m-r-md);
    cursor: pointer;
    padding: 12px 4px;
    min-height: 100%;
    transition: var(--m-t-fast);
}
.m-rec--more:hover {
    background: var(--m-accent-soft);
    border-color: var(--m-accent);
    border-style: solid;
}
.m-rec--more__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--m-surface);
    color: var(--m-text-mute);
    transition: var(--m-t-fast);
    flex-shrink: 0;
}
.m-rec--more__icon svg { display: block; }
.m-rec--more:hover .m-rec--more__icon {
    background: var(--m-accent); color: white;
}
.m-rec--more__label {
    font-size: 11.5px; font-weight: 700;
    color: var(--m-text-mute);
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-align: center;
    transition: var(--m-t-fast);
    letter-spacing: -0.01em;
}
.m-rec--more:hover .m-rec--more__label {
    color: var(--m-accent-deep);
}
@media (max-width: 700px) {
    /* 좁은 화면(모바일)에서는 세로 탭이 어색하니 가로 바 형태로 전환 */
    .m-rec--more {
        flex-direction: row;
        grid-column: 1 / -1;
        min-height: 0;
        padding: 10px 14px;
    }
}

/* 새로 나타나는 추천 카드 — 부드럽게 등장 */
[data-more-item] {
    animation: m-expand-in 220ms var(--m-ease-out);
}
@keyframes m-expand-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================== Login page ============================== */
.m-login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 20% 0%, var(--m-accent-soft) 0%, transparent 50%),
        radial-gradient(circle at 80% 100%, #fef3f2 0%, transparent 50%),
        var(--m-bg);
    padding: 20px;
}
.m-login {
    width: 100%; max-width: 380px;
    background: var(--m-surface);
    border-radius: var(--m-r-2xl);
    padding: 40px 36px;
    box-shadow: var(--m-shadow-pop);
    border: 1px solid var(--m-line-soft);
    display: flex; flex-direction: column; gap: 16px;
    animation: m-modal-in 320ms var(--m-ease-out);
}
.m-login__title {
    font-size: 26px; font-weight: 800; color: var(--m-ink);
    letter-spacing: -0.030em;
    text-align: center;
    margin-top: 6px;
}
.m-login__sub {
    font-size: 13.5px; color: var(--m-text-soft);
    text-align: center; margin-bottom: 16px;
}
.m-login__field {
    display: flex; flex-direction: column; gap: 6px;
}
.m-login__field label {
    font-size: 12.5px; font-weight: 600; color: var(--m-text-soft);
    padding-left: 2px;
}
.m-login__field .m-input {
    padding: 14px 16px; font-size: 14.5px; border-radius: 12px;
}
.m-login__error {
    font-size: 13px; color: var(--m-error-deep);
    background: var(--m-error-soft);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    min-height: 0;
}
.m-login__error:empty {
    display: none;
}
.m-login .m-btn {
    padding: 14px 20px; font-size: 14.5px; border-radius: 12px;
    margin-top: 6px;
}

/* ============================== 정상 출고 리스트 페이지 ============================== */
.m-nrm-store {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-md);
    margin-bottom: 10px;
    overflow: hidden;
    border-left: 3px solid var(--m-warning);
    transition: var(--m-t-fast);
}
.m-nrm-store--done {
    border-left-color: var(--m-success);
}
.m-nrm-store__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--m-surface-2);
    border-bottom: 1px solid var(--m-line-soft);
}
.m-nrm-store__name {
    font-size: 14px; font-weight: 800; color: var(--m-ink);
    letter-spacing: -0.011em;
}
.m-nrm-store__count {
    font-size: 12px; font-weight: 700;
    color: var(--m-text-soft);
    font-variant-numeric: tabular-nums;
}
.m-nrm-store--done .m-nrm-store__count {
    color: var(--m-success-deep);
}
.m-nrm-store__items {
    display: flex; flex-direction: column;
}
.m-nrm-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--m-line-soft);
    transition: var(--m-t-fast);
}
.m-nrm-item:last-child { border-bottom: 0; }
.m-nrm-item:hover { background: var(--m-surface-2); }
.m-nrm-item.is-shipped { background: var(--m-success-soft); }
.m-nrm-item.is-shipped:hover { background: #dcfce7; }

.m-nrm-item__main {
    display: flex; align-items: baseline; gap: 10px;
    min-width: 0; flex: 1;
}
.m-nrm-item__brand {
    font-size: 10.5px; font-weight: 700;
    color: var(--m-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.m-nrm-item__name {
    font-size: 13.5px; font-weight: 700; color: var(--m-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-nrm-item__meta {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
.m-nrm-item__price {
    font-size: 13px; font-weight: 700; color: var(--m-text);
    font-variant-numeric: tabular-nums;
}
.m-nrm-item__ship-info {
    font-size: 11px; color: var(--m-text-mute);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .m-nrm-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .m-nrm-item__meta {
        width: 100%;
        justify-content: space-between;
    }
    .m-nrm-item__name {
        white-space: normal;
    }
}

/* ============================== 채택기한 배지/안내 ============================== */
.m-deadline-badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 99px;
    font-size: 11px; font-weight: 700;
    background: var(--m-surface-2); color: var(--m-text-mute);
    white-space: nowrap;
}
.m-deadline-badge--urgent {
    background: var(--m-warning-soft); color: var(--m-warning-deep);
}
.m-deadline-badge--expired {
    background: var(--m-error-soft); color: var(--m-error-deep);
}
.m-deadline-notice {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0; padding: 10px 14px;
    background: var(--m-error-soft); color: var(--m-error-deep);
    border-radius: var(--m-r-sm);
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.m-deadline-notice svg { flex-shrink: 0; }

.m-adopt-btn.is-locked {
    background: var(--m-surface-2); color: var(--m-text-mute);
    border-color: var(--m-line-soft);
    cursor: not-allowed;
}
.m-adopt-btn.is-locked:hover { background: var(--m-surface-2); }

.m-cmp__locked-notice {
    padding: 10px 12px; text-align: center;
    background: var(--m-surface-2); color: var(--m-text-mute);
    border-radius: var(--m-r-sm);
    font-size: 12.5px; font-weight: 600;
    flex: 1;
}

/* ============================== 본사 출고완료 확인란 (store.js) ============================== */
.m-shipped-summary {
    background: var(--m-success-soft);
    border: 1px solid #bbf7d0;
    border-radius: var(--m-r-md);
    margin-bottom: 12px;
    overflow: hidden;
}
.m-shipped-summary__toggle {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    background: transparent; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--m-success-deep);
    text-align: left;
}
.m-shipped-summary__toggle svg:first-child { flex-shrink: 0; }
.m-shipped-summary__toggle span { flex: 1; }
.m-shipped-summary__chev { transition: transform 200ms; flex-shrink: 0; }
.m-shipped-summary__toggle.is-open .m-shipped-summary__chev { transform: rotate(180deg); }
.m-shipped-summary__body {
    padding: 2px 14px 10px;
}
.m-shipped-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.6);
    font-size: 12.5px;
}
.m-shipped-row:first-child { border-top: none; }
.m-shipped-row__main {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; flex: 1;
}
.m-shipped-row__tag {
    flex-shrink: 0;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 4px;
    background: white; color: var(--m-success-deep);
}
.m-shipped-row__tag--sub {
    background: var(--m-accent-soft); color: var(--m-accent-deep);
}
.m-shipped-row__brand {
    flex-shrink: 0;
    font-size: 10.5px; font-weight: 700; color: var(--m-text-mute);
    text-transform: uppercase;
}
.m-shipped-row__name {
    font-weight: 700; color: var(--m-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-shipped-row__arrow { color: var(--m-text-mute); font-weight: 400; }
.m-shipped-row__time {
    flex-shrink: 0;
    font-size: 11px; color: var(--m-success-deep);
    font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ============================== 대시보드 정상출고 요약 바 (dashboard.js) ============================== */
.m-normal-summary-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--m-warning-soft);
    border-radius: var(--m-r-sm);
    border-left: 3px solid var(--m-warning);
}
.m-normal-summary-bar.is-done {
    background: var(--m-success-soft);
    border-left-color: var(--m-success);
}
.m-normal-summary-bar__icon {
    display: flex; align-items: center; flex-shrink: 0;
    color: var(--m-warning-deep);
}
.m-normal-summary-bar.is-done .m-normal-summary-bar__icon { color: var(--m-success-deep); }
.m-normal-summary-bar__text {
    flex: 1; font-size: 12.5px; font-weight: 600; color: var(--m-text);
}
.m-normal-summary-bar__link {
    flex-shrink: 0;
    font-size: 12px; font-weight: 700;
    color: var(--m-accent-deep);
    text-decoration: none;
    white-space: nowrap;
}
.m-normal-summary-bar__link:hover { text-decoration: underline; }

/* ============================== 미채택만 보기 토글 ============================== */
.m-hide-adopted-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 4px 0 12px;
    padding: 6px 12px;
    background: var(--m-surface-2);
    border-radius: 99px;
    font-size: 12.5px; font-weight: 600; color: var(--m-text-soft);
    cursor: pointer;
    user-select: none;
}
.m-hide-adopted-toggle input { cursor: pointer; }
.m-hide-adopted-toggle:hover { background: var(--m-line-soft); }

/* ============================== 정상출고 리스트 정렬 헤더 (normal.js) ============================== */
.m-nrm-sort-header {
    display: flex; gap: 4px;
    padding: 6px 16px;
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-line-soft);
}
.m-nrm-sort-header__col {
    background: transparent; border: none; cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    color: var(--m-text-mute);
    letter-spacing: 0.01em;
    transition: var(--m-t-fast);
}
.m-nrm-sort-header__col:hover { background: var(--m-surface-2); color: var(--m-text-soft); }
.m-nrm-sort-header__col.is-active { color: var(--m-accent-deep); background: var(--m-accent-soft); }

/* ============================== 새 데이터 감지 배너 (store.js) ============================== */
.m-new-data-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px;
    background: var(--m-warning-soft);
    border-radius: var(--m-r-sm);
    font-size: 12.5px; font-weight: 600; color: var(--m-warning-deep);
}
.m-new-data-banner button {
    background: var(--m-warning-deep); color: white;
    border: none; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; font-weight: 700;
    cursor: pointer;
}

/* ============================== 공급브랜드 관리 페이지 (brands.js) ============================== */
.m-br-panel__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid var(--m-line-soft);
}
.m-br-panel__store { font-size: 18px; font-weight: 800; color: var(--m-ink); letter-spacing: -0.02em; }
.m-br-panel__meta { font-size: 12px; color: var(--m-text-mute); margin-top: 4px; font-weight: 600; }

.m-br-mode-toggle {
    display: flex; gap: 8px;
}
.m-br-mode-btn {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 14px;
    background: var(--m-surface-2);
    border: 1.5px solid transparent;
    border-radius: var(--m-r-sm);
    cursor: pointer;
    text-align: left;
    transition: var(--m-t-fast);
    min-width: 140px;
}
.m-br-mode-btn:hover { background: var(--m-line-soft); }
.m-br-mode-btn.is-active {
    background: var(--m-accent-soft);
    border-color: var(--m-accent);
}
.m-br-mode-btn__title { font-size: 13px; font-weight: 800; color: var(--m-text); }
.m-br-mode-btn.is-active .m-br-mode-btn__title { color: var(--m-accent-deep); }
.m-br-mode-btn__desc { font-size: 10.5px; color: var(--m-text-mute); font-weight: 600; }

.m-br-add-row {
    display: flex; gap: 8px;
    margin-bottom: 14px;
}
.m-br-add-row .m-input { flex: 1; }

.m-br-brand-list {
    display: flex; flex-wrap: wrap; gap: 8px;
    min-height: 40px;
    margin-bottom: 16px;
}
.m-br-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 8px 6px 12px;
    background: var(--m-surface-2);
    border-radius: 99px;
    font-size: 12.5px; font-weight: 700; color: var(--m-text);
}
.m-br-chip button {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: transparent; border: none; cursor: pointer;
    color: var(--m-text-mute); font-size: 15px; line-height: 1;
    transition: var(--m-t-fast);
}
.m-br-chip button:hover { background: var(--m-error-soft); color: var(--m-error-deep); }

.m-br-empty-hint {
    padding: 14px 16px;
    background: var(--m-surface-2);
    border-radius: var(--m-r-sm);
    font-size: 12.5px; color: var(--m-text-mute); font-weight: 600;
    line-height: 1.5;
}

.m-br-panel__foot {
    padding-top: 14px; border-top: 1px solid var(--m-line-soft);
}

/* 전체 현황 리스트 */
.m-br-ov-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--m-line-soft);
    cursor: pointer;
    transition: var(--m-t-fast);
}
.m-br-ov-row:hover { background: var(--m-surface-2); }
.m-br-ov-row:last-child { border-bottom: none; }
.m-br-ov-store { font-size: 13.5px; font-weight: 700; color: var(--m-text); min-width: 160px; }
.m-br-ov-badge {
    flex-shrink: 0;
    font-size: 10.5px; font-weight: 800;
    padding: 2px 8px; border-radius: 4px;
}
.m-br-ov-badge--deny { background: var(--m-warning-soft); color: var(--m-warning-deep); }
.m-br-ov-badge--allow { background: var(--m-accent-soft); color: var(--m-accent-deep); }
.m-br-ov-count { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--m-text-mute); }
.m-br-ov-brands { font-size: 12px; color: var(--m-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================== 재고 현황 조회 (inventory_report.js) ============================== */
.m-inv-cat-bars { padding: 4px 0; }
.m-inv-cat-bar-row {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 0;
}
.m-inv-cat-bar-label {
    flex: 0 0 100px; font-size: 12.5px; font-weight: 700; color: var(--m-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-inv-cat-bar-track {
    flex: 1; height: 10px; background: var(--m-surface-2); border-radius: 99px; overflow: hidden;
}
.m-inv-cat-bar-fill {
    height: 100%; background: var(--m-accent); border-radius: 99px;
    transition: width 300ms;
}
.m-inv-cat-bar-value {
    flex: 0 0 56px; text-align: right;
    font-size: 12px; font-weight: 700; color: var(--m-text-mute);
    font-variant-numeric: tabular-nums;
}

.m-inv-table-head {
    display: flex; gap: 12px;
    padding: 8px 14px;
    background: var(--m-surface-2);
    border-radius: var(--m-r-sm) var(--m-r-sm) 0 0;
    border-bottom: 1px solid var(--m-line-soft);
}
.m-inv-sort-col {
    flex: 1;
    background: transparent; border: none; cursor: pointer;
    text-align: left;
    font-size: 11px; font-weight: 700; color: var(--m-text-mute);
    letter-spacing: 0.02em;
    padding: 2px 4px;
    border-radius: 4px;
    transition: var(--m-t-fast);
}
.m-inv-sort-col:hover { background: var(--m-line-soft); }
.m-inv-sort-col.is-active { color: var(--m-accent-deep); }

.m-inv-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--m-line-soft);
    font-size: 13px;
    transition: var(--m-t-fast);
}
.m-inv-row:hover { background: var(--m-surface-2); }
.m-inv-row:last-child { border-bottom: none; }
.m-inv-row.is-hidden-product { opacity: 0.55; }
.m-inv-row__brand {
    flex: 1; font-weight: 700; color: var(--m-text-mute);
    font-size: 11.5px; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-inv-row__name {
    flex: 1; font-weight: 700; color: var(--m-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-inv-hidden-badge {
    font-size: 9.5px; font-weight: 800; color: var(--m-error-deep);
    background: var(--m-error-soft); padding: 1px 5px; border-radius: 4px;
}
.m-inv-row__category {
    flex: 0 0 90px; font-size: 12px; color: var(--m-text-soft); font-weight: 600;
}
.m-inv-row__price {
    flex: 0 0 100px; text-align: right; font-weight: 700; color: var(--m-text);
    font-variant-numeric: tabular-nums;
}
.m-inv-row__stock {
    flex: 0 0 130px; text-align: right; font-weight: 700; color: var(--m-success-deep);
    font-variant-numeric: tabular-nums;
}
.m-inv-row__stock.is-low { color: var(--m-warning-deep); }
.m-inv-row__stock.is-out { color: var(--m-error); }

/* ============================== 정상출고 리스트 - 체크박스/일괄처리/재고표시 (normal.js) ============================== */
.m-nrm-store__check, .m-nrm-item__check {
    display: flex; align-items: center; flex-shrink: 0;
}
.m-nrm-store__check input, .m-nrm-item__check input {
    width: 16px; height: 16px; cursor: pointer;
}
.m-nrm-store__head {
    gap: 10px;
}
.m-nrm-bulk-ship-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    background: var(--m-accent); color: white;
    border: none; border-radius: 6px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: var(--m-t-fast);
}
.m-nrm-bulk-ship-btn:hover:not(:disabled) { background: var(--m-accent-deep); }
.m-nrm-bulk-ship-btn:disabled {
    background: var(--m-line-soft); color: var(--m-text-mute); cursor: not-allowed;
}

.m-nrm-item__qty {
    flex-shrink: 0;
    font-size: 11px; font-weight: 700; color: var(--m-text-mute);
    background: var(--m-surface-2);
    padding: 1px 7px; border-radius: 4px;
}
.m-nrm-item__stock-info {
    flex-shrink: 0;
    font-size: 11.5px; font-weight: 700; color: var(--m-success-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.m-nrm-item__stock-info.is-tight {
    color: var(--m-warning-deep);
}

/* ============================== 매장별 재고현황 (store_inventory.js) ============================== */
.m-si-panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 4px;
    border-bottom: 1px solid var(--m-line-soft);
}
.m-si-panel-store { font-size: 16px; font-weight: 800; color: var(--m-ink); }
.m-si-panel-stats { font-size: 12.5px; color: var(--m-text-mute); font-weight: 600; }

.m-si-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--m-line-soft);
    font-size: 13px;
    transition: var(--m-t-fast);
}
.m-si-row:hover { background: var(--m-surface-2); }
.m-si-row:last-child { border-bottom: none; }
.m-si-row__main {
    flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
}
.m-si-row__brand {
    flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--m-text-mute);
    text-transform: uppercase;
}
.m-si-row__name {
    font-weight: 700; color: var(--m-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-si-row__cat {
    flex-shrink: 0; font-size: 10.5px; font-weight: 700;
    background: var(--m-surface-2); color: var(--m-text-soft);
    padding: 1px 7px; border-radius: 4px;
}
.m-si-row__qty {
    flex: 0 0 90px; text-align: right; font-weight: 800; color: var(--m-accent-deep);
    font-variant-numeric: tabular-nums;
}
.m-si-row__cost {
    flex: 0 0 110px; text-align: right; font-weight: 700; color: var(--m-text-mute);
    font-variant-numeric: tabular-nums;
}

/* ============================== 판매 데이터 (sales_report.js) ============================== */
.m-sa-rank-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.m-sa-rank-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--m-t-fast);
}
.m-sa-rank-row:hover { background: var(--m-surface-2); }
.m-sa-rank-num {
    flex: 0 0 18px; text-align: center;
    font-size: 11px; font-weight: 800; color: var(--m-text-mute);
}
.m-sa-rank-name {
    flex: 0 0 110px; font-size: 12.5px; font-weight: 700; color: var(--m-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-sa-rank-bar-track {
    flex: 1; height: 8px; background: var(--m-surface-2); border-radius: 99px; overflow: hidden;
}
.m-sa-rank-bar-fill {
    height: 100%; background: #1729EC; border-radius: 99px;
}
.m-sa-rank-revenue {
    flex: 0 0 90px; text-align: right;
    font-size: 12px; font-weight: 700; color: var(--m-text-mute);
    font-variant-numeric: tabular-nums;
}

.m-sa-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--m-line-soft);
    font-size: 13px;
    transition: var(--m-t-fast);
}
.m-sa-row:hover { background: var(--m-surface-2); }
.m-sa-row:last-child { border-bottom: none; }
.m-sa-row.is-return { background: var(--m-error-soft); }
.m-sa-row__date {
    flex: 0 0 90px; font-size: 11.5px; font-weight: 700; color: var(--m-text-mute);
    font-variant-numeric: tabular-nums;
}
.m-sa-row__main { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-sa-row__brand {
    flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--m-text-mute);
    text-transform: uppercase;
}
.m-sa-row__name {
    font-weight: 700; color: var(--m-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-sa-return-badge {
    flex-shrink: 0; font-size: 10px; font-weight: 800; color: var(--m-error-deep);
    background: white; padding: 1px 6px; border-radius: 4px;
}
.m-sa-row__qty {
    flex: 0 0 70px; text-align: right; font-weight: 800; color: var(--m-accent-deep);
    font-variant-numeric: tabular-nums;
}
.m-sa-row.is-return .m-sa-row__qty { color: var(--m-error-deep); }
.m-sa-row__revenue {
    flex: 0 0 110px; text-align: right; font-weight: 700; color: var(--m-text);
    font-variant-numeric: tabular-nums;
}


/* ============================== 매장지원 통합 (2026-07) ============================== */
/* 사이드바 — 섹션 라벨이 li 로 렌더되므로 두 번째 섹션부터 위 간격 */
li.m-nav__section-label { list-style: none; }
li.m-nav__section-label:not(:first-child) { padding-top: 22px; }
.m-nav__label { flex: 1; min-width: 0; }
.m-nav__badge {
    background: var(--m-error); color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    padding: 4px 7px; border-radius: 99px;
    min-width: 18px; text-align: center;
    letter-spacing: 0;
}

/* ============================== 사이드바 매장 프로필 (2026-07 UI 업그레이드) ============================== */
.m-profile {
    display: none;   /* JS 가 user-ready 후 flex 로 전환 */
    align-items: center; gap: 10px;
    background: var(--m-accent-soft);
    border-radius: var(--m-r-md);
    padding: 12px;
    margin: 0 2px 18px;
}
.m-profile.is-ready { display: flex; }
.m-profile__avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 12px;
    background: var(--m-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
}
.m-profile__main { min-width: 0; flex: 1; }
.m-profile__name {
    font-size: 13px; font-weight: 700; color: var(--m-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -0.015em;
}
.m-profile__sub {
    font-size: 11px; color: var(--m-text-soft); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 페이지 진입 모션 — 은은한 fade + rise */
.m-main__inner { animation: m-page-in 260ms var(--m-ease-out); }
@keyframes m-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .m-main__inner { animation: none; }
}

/* ============================== 마감 폴리싱 (2026-07) ============================== */
/* 텍스트 선택 색 — 브랜드 터치 */
::selection { background: var(--m-accent-soft); color: var(--m-accent-darker); }

/* 키보드 포커스 — 접근성 + 프로덕트 완성도 */
:focus-visible {
    outline: 2px solid var(--m-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.m-input:focus-visible, .m-select:focus-visible, .sp-textarea:focus-visible { outline: none; }

/* 버튼 촉감 — 눌림 반응 */
.m-btn { transition: background var(--m-t-fast), border-color var(--m-t-fast), box-shadow var(--m-t-fast), transform 80ms var(--m-ease); }
.m-btn:active:not(:disabled) { transform: scale(0.97); }
.m-btn--primary:hover { box-shadow: 0 4px 16px rgba(23, 41, 236, 0.22); }

/* 크롬 자동완성 노란 배경 제거 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--m-surface) inset;
    -webkit-text-fill-color: var(--m-text);
}

/* 로그인 워드마크 — ROUNZ 는 브랜드 블루, 통합조회는 잉크 */
.m-login__title { color: var(--m-accent); }
.m-login__title span { color: var(--m-ink); font-weight: 700; }

/* ============================== 대체품 채택 행 리디자인 (2026-07) ==============================
   문제: auto-fill 그리드라 카드 3장(품절+추천1+토글)일 때 빈 트랙이 생기고
        정사각 이미지 때문에 카드가 지나치게 큼.
   변경: flex 로 전환 — 접힘(3장)일 땐 좌측 정렬로 컴팩트하게,
        펼침(품절+추천5+토글)일 땐 한 화면 한 줄에 들어오도록 폭 산정. */
.m-row__inner {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.m-row__inner > .m-rec {
    flex: 1 1 168px;
    min-width: 158px;
    max-width: 232px;
}

/* 이미지 — 정사각 → 4:3, 카드 높이 대폭 축소 */
.m-rec__img { aspect-ratio: 4 / 3; }

/* 이미지 없는 카드 — 텍스트만 덩그러니 → 안경 아이콘 플레이스홀더 */
div.m-rec__img {
    flex-direction: column;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
}
div.m-rec__img::before {
    content: '';
    width: 46px; height: 22px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 22' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='12' r='8'/%3E%3Ccircle cx='37' cy='12' r='8'/%3E%3Cpath d='M19 10c2-2.5 8-2.5 10 0'/%3E%3Cpath d='M3 10L1 6M45 10l2-4'/%3E%3C/svg%3E");
}

/* ===================================================
   2026-07-09 홈 인사말 + 스탯 카드 + 팝업 알림
   (ROUNZ PARTNERS 디자인 이식 — 신규 클래스만, 기존 룰 무변경)
   =================================================== */

/* ─────────── 인사말 히어로 (pb_app 홈 스타일) ─────────── */
.m-hello {
    margin-bottom: 22px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 320ms var(--m-ease-out), transform 320ms var(--m-ease-out);
}
.m-hello.is-ready { opacity: 1; transform: translateY(0); }
.m-hello__title {
    font-size: 26px;
    font-weight: 800;
    color: var(--m-ink);
    letter-spacing: -0.032em;
    line-height: 1.3;
    margin: 0;
}
.m-hello__title strong {
    color: var(--m-accent);
    font-weight: 800;
}
.m-hello__desc {
    font-size: 14px;
    color: var(--m-text-soft);
    margin-top: 5px;
    letter-spacing: -0.005em;
}
@media (max-width: 700px) {
    .m-hello__title { font-size: 21px; }
}

/* ─────────── 스탯 카드 (아이콘 헤드형 — pb_app hm-stat 이식) ─────────── */
.m-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}
.m-stat {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-lg);
    padding: 18px 20px;
    transition: var(--m-t-fast);
    display: block;
    color: inherit;
    box-shadow: var(--m-shadow-card);
}
.m-stat:hover {
    border-color: var(--m-line);
    transform: translateY(-1px);
    box-shadow: var(--m-shadow-card-hover);
}
.m-stat__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.m-stat__icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.m-stat__icon svg { width: 15px; height: 15px; }
.m-stat__icon--accent  { background: var(--m-accent-soft);  color: var(--m-accent); }
.m-stat__icon--success { background: var(--m-success-soft); color: var(--m-success-deep); }
.m-stat__icon--warn    { background: var(--m-warning-soft); color: var(--m-warning-deep); }
.m-stat__icon--error   { background: var(--m-error-soft);   color: var(--m-error-deep); }
.m-stat__icon--info    { background: var(--m-surface-2);    color: var(--m-text-soft); }
.m-stat__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--m-text-soft);
    letter-spacing: -0.005em;
}
.m-stat__value {
    font-size: 28px;
    font-weight: 800;
    color: var(--m-ink);
    letter-spacing: -0.032em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.m-stat__value.is-error   { color: var(--m-error); }
.m-stat__value.is-success { color: var(--m-success-deep); }
.m-stat__unit {
    font-size: 14px;
    font-weight: 700;
    color: var(--m-text-soft);
    margin-left: 3px;
    letter-spacing: -0.01em;
}
.m-stat__hint {
    font-size: 11.5px;
    color: var(--m-text-mute);
    margin-top: 4px;
    font-weight: 600;
}
@media (max-width: 700px) {
    .m-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .m-stat { padding: 14px 16px; }
    .m-stat__value { font-size: 23px; }
}

/* ─────────── 팝업 알림 (마스터 발송 → 사용자 확인) ─────────── */
.m-popup-backdrop {
    position: fixed; inset: 0;
    background: rgba(11,15,23,0.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: m-fade-in 220ms var(--m-ease-out);
}
.m-popup-backdrop.is-closing { animation: m-popup-fade-out 260ms var(--m-ease) forwards; }
@keyframes m-popup-fade-out { to { opacity: 0; } }

.m-popup {
    background: var(--m-surface);
    border-radius: var(--m-r-2xl);
    padding: 32px 28px 24px;
    max-width: 420px; width: 100%;
    max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: var(--m-shadow-pop);
    animation: m-modal-in 300ms var(--m-ease-out);
    text-align: center;
}
.m-popup__icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--m-accent-soft);
    color: var(--m-accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    flex-shrink: 0;
}
.m-popup__eyebrow {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--m-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.m-popup__title {
    font-size: 19px;
    font-weight: 800;
    color: var(--m-ink);
    letter-spacing: -0.024em;
    line-height: 1.35;
    margin: 0 0 12px;
    word-break: keep-all;
}
.m-popup__body {
    font-size: 14px;
    color: var(--m-text-soft);
    line-height: 1.65;
    letter-spacing: -0.005em;
    white-space: pre-wrap;
    word-break: keep-all;
    overflow-y: auto;
    max-height: 40vh;
    text-align: left;
    background: var(--m-bg);
    border-radius: var(--m-r-md);
    padding: 16px 18px;
    margin-bottom: 8px;
}
.m-popup__meta {
    font-size: 11.5px;
    color: var(--m-text-mute);
    font-weight: 600;
    margin: 6px 0 16px;
    font-variant-numeric: tabular-nums;
}
.m-popup__confirm {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: var(--m-r-md);
    background: var(--m-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: var(--m-t-fast);
    flex-shrink: 0;
}
.m-popup__confirm:hover { background: var(--m-accent-deep); }
.m-popup__confirm:active { transform: scale(0.99); }
.m-popup__confirm:disabled { cursor: default; }
.m-popup__confirm.is-done {
    background: var(--m-success);
    color: #fff;
}
.m-popup__queue-hint {
    font-size: 11.5px;
    color: var(--m-text-mute);
    font-weight: 600;
    margin-top: 12px;
}

/* ─────────── 팝업 발송 관리 페이지 (마스터) ─────────── */
.m-popup-admin__grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1000px) {
    .m-popup-admin__grid { grid-template-columns: 1fr; }
}
.m-popup-admin__field { margin-bottom: 14px; }
.m-popup-admin__label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--m-text-soft);
    margin-bottom: 6px;
}
.m-popup-admin__count {
    font-weight: 600;
    color: var(--m-text-mute);
    font-variant-numeric: tabular-nums;
}
.m-popup-admin__textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    padding: 12px 14px;
    background: var(--m-surface); color: var(--m-text);
    border: 1px solid var(--m-line); border-radius: var(--m-r-sm);
    font-size: 14px; line-height: 1.6;
    transition: var(--m-t-fast);
}
.m-popup-admin__textarea:hover { border-color: var(--m-line-strong); }
.m-popup-admin__textarea:focus {
    outline: none; border-color: var(--m-accent);
    box-shadow: var(--m-shadow-focus);
}
.m-popup-admin__target-mode {
    display: flex; gap: 8px; margin-bottom: 10px;
}
.m-popup-admin__mode-btn {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-sm);
    background: var(--m-surface);
    color: var(--m-text-soft);
    font-size: 13px; font-weight: 700;
    transition: var(--m-t-fast);
}
.m-popup-admin__mode-btn.is-on {
    border-color: var(--m-accent);
    background: var(--m-accent-soft);
    color: var(--m-accent-deep);
}
.m-popup-admin__accounts {
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-sm);
    max-height: 260px;
    overflow-y: auto;
    background: var(--m-surface);
}
.m-popup-admin__account {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--m-line-soft);
    cursor: pointer;
    font-size: 13px;
    transition: background var(--m-t-fast);
    user-select: none;
}
.m-popup-admin__account:last-child { border-bottom: none; }
.m-popup-admin__account:hover { background: var(--m-bg); }
.m-popup-admin__account input {
    width: 15px; height: 15px;
    accent-color: var(--m-accent);
    cursor: pointer;
    flex-shrink: 0;
}
.m-popup-admin__account-name { font-weight: 700; color: var(--m-text); }
.m-popup-admin__account-sub  { color: var(--m-text-mute); font-size: 12px; }
.m-popup-admin__account.is-inactive { opacity: 0.45; }
.m-popup-admin__role-pill {
    margin-left: auto;
    font-size: 10.5px; font-weight: 800;
    padding: 2px 8px; border-radius: 99px;
    background: var(--m-surface-2); color: var(--m-text-soft);
    flex-shrink: 0;
}
.m-popup-admin__role-pill--master { background: var(--m-ink); color: #fff; }
.m-popup-admin__role-pill--admin  { background: var(--m-accent-soft); color: var(--m-accent-deep); }

/* 발송 이력 카드 */
.m-popup-item {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-lg);
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: var(--m-shadow-card);
    transition: var(--m-t-fast);
}
.m-popup-item.is-inactive { opacity: 0.55; }
.m-popup-item__top {
    display: flex; align-items: flex-start; gap: 10px;
}
.m-popup-item__title {
    font-size: 15px; font-weight: 800; color: var(--m-ink);
    letter-spacing: -0.01em; flex: 1; min-width: 0;
    word-break: keep-all;
}
.m-popup-item__badge {
    font-size: 10.5px; font-weight: 800;
    padding: 3px 9px; border-radius: 99px;
    flex-shrink: 0;
}
.m-popup-item__badge--on  { background: var(--m-success-soft); color: var(--m-success-deep); }
.m-popup-item__badge--off { background: var(--m-surface-2); color: var(--m-text-mute); }
.m-popup-item__body {
    font-size: 13px; color: var(--m-text-soft);
    line-height: 1.6; margin: 8px 0 12px;
    white-space: pre-wrap; word-break: keep-all;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.m-popup-item__progress-track {
    height: 6px; border-radius: 99px;
    background: var(--m-surface-2);
    overflow: hidden;
    margin-bottom: 8px;
}
.m-popup-item__progress-fill {
    height: 100%; border-radius: 99px;
    background: var(--m-accent);
    transition: width var(--m-t-slow);
}
.m-popup-item__progress-fill.is-done { background: var(--m-success); }
.m-popup-item__foot {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--m-text-mute); font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}
.m-popup-item__foot-spacer { flex: 1; }
.m-popup-item__ack-list {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--m-line-soft);
    display: none;
}
.m-popup-item__ack-list.is-open { display: block; }
.m-popup-item__ack-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; padding: 5px 0;
    color: var(--m-text);
}
.m-popup-item__ack-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
}
.m-popup-item__ack-dot--ok   { background: var(--m-success); }
.m-popup-item__ack-dot--wait { background: var(--m-line-strong); }
.m-popup-item__ack-time {
    margin-left: auto; color: var(--m-text-mute);
    font-size: 11.5px; font-variant-numeric: tabular-nums;
}

/* ─────────── 받은 알림 이력 (전체 사용자) ─────────── */
.m-hist {
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-lg);
    margin-bottom: 10px;
    box-shadow: var(--m-shadow-card);
    overflow: hidden;
    transition: var(--m-t-fast);
}
.m-hist:hover { border-color: var(--m-line); }
.m-hist.is-unread { border-color: var(--m-accent); }
.m-hist__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
}
.m-hist__status {
    font-size: 10.5px; font-weight: 800;
    padding: 3px 9px; border-radius: 99px;
    flex-shrink: 0; letter-spacing: -0.01em;
}
.m-hist__status--ok  { background: var(--m-success-soft); color: var(--m-success-deep); }
.m-hist__status--new { background: var(--m-accent); color: #fff; }
.m-hist__title {
    flex: 1; min-width: 0;
    font-size: 14.5px; font-weight: 700; color: var(--m-ink);
    letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-hist.is-unread .m-hist__title { font-weight: 800; }
.m-hist__date {
    font-size: 12px; color: var(--m-text-mute); font-weight: 600;
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.m-hist__chev {
    color: var(--m-text-mute); flex-shrink: 0;
    transition: transform var(--m-t-base);
}
.m-hist.is-open .m-hist__chev { transform: rotate(180deg); }
.m-hist__detail { display: none; }
.m-hist.is-open .m-hist__detail { display: block; }
.m-hist__body {
    font-size: 13.5px; color: var(--m-text);
    line-height: 1.7; letter-spacing: -0.005em;
    white-space: pre-wrap; word-break: keep-all;
    background: var(--m-bg);
    margin: 0 18px;
    padding: 16px 18px;
    border-radius: var(--m-r-md);
}
.m-hist__foot {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 12px 18px 16px;
}
.m-hist__acked-at {
    font-size: 12px; color: var(--m-text-mute); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.m-hist__ack-btn { padding: 9px 18px !important; }

/* ─────────── 매장별 후보 풀 깔때기 (마스터 드릴다운) ─────────── */
.m-funnel {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin: 2px 0 14px;
    padding: 9px 14px;
    background: var(--m-bg);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-md);
    font-size: 12px; font-weight: 600;
    color: var(--m-text-soft);
    font-variant-numeric: tabular-nums;
    cursor: help;
}
.m-funnel__label {
    font-size: 10.5px; font-weight: 800; color: var(--m-text-mute);
    letter-spacing: 0.04em; text-transform: uppercase;
    margin-right: 3px;
}
.m-funnel__step { white-space: nowrap; }
.m-funnel__arrow { color: var(--m-line-strong); font-weight: 400; }
.m-funnel__final {
    white-space: nowrap;
    color: var(--m-accent-deep); font-weight: 800;
    background: var(--m-accent-soft);
    padding: 3px 10px; border-radius: 99px;
}
.m-funnel.is-narrow { border-color: var(--m-warning); }
.m-funnel__warn {
    font-size: 10.5px; font-weight: 800;
    color: var(--m-warning-deep); background: var(--m-warning-soft);
    padding: 3px 9px; border-radius: 99px;
    white-space: nowrap;
}

/* ─────────── 재고 연동 채택 상태 (선착순 마감 / 중복 방지 / 잔여) ─────────── */
.m-rec.is-closed { opacity: 0.62; }
.m-rec.is-closed .m-rec__img-wrap { filter: grayscale(0.7); }
.m-pill--soldout { background: var(--m-surface-2); color: var(--m-text-mute); font-weight: 800; }
.m-pill--dup     { background: var(--m-warning-soft); color: var(--m-warning-deep); font-weight: 800; }
.m-pill--left    { background: var(--m-error-soft); color: var(--m-error-deep); font-weight: 800; }

/* ─────────── 대시보드 후보 풀 표시 ─────────── */
.m-dash-store__pool {
    display: inline-block;
    margin-left: 8px;
    font-size: 10.5px; font-weight: 800;
    color: var(--m-accent-deep);
    background: var(--m-accent-soft);
    padding: 2px 8px; border-radius: 99px;
    vertical-align: 1px;
    font-variant-numeric: tabular-nums;
    cursor: help;
}
.m-match__pool {
    color: var(--m-text-mute);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ─────────── 세그먼트 필터 (받은 알림 등) ─────────── */
.m-seg {
    display: inline-flex; gap: 4px;
    background: var(--m-surface-2);
    border-radius: 12px;
    padding: 4px;
}
.m-seg__btn {
    border: none; background: transparent;
    padding: 8px 16px; border-radius: 9px;
    font-size: 13px; font-weight: 700;
    color: var(--m-text-soft);
    transition: var(--m-t-fast);
    display: inline-flex; align-items: center; gap: 6px;
}
.m-seg__btn:hover { color: var(--m-text); }
.m-seg__btn.is-active {
    background: var(--m-surface);
    color: var(--m-ink);
    box-shadow: var(--m-shadow-card);
}
.m-seg__count {
    font-size: 11px; font-weight: 800;
    color: var(--m-text-mute);
    font-variant-numeric: tabular-nums;
}
.m-seg__btn.is-active .m-seg__count { color: var(--m-accent-deep); }

/* ─────────── 회원조회 임베드 ─────────── */
.m-members-embed { width: 100%; height: calc(100vh - 260px); min-height: 480px; }
.m-members-embed iframe { width: 100%; height: 100%; border: none; display: block; }
.m-members-embed__note {
    padding: 10px 18px;
    font-size: 12px; color: var(--m-text-mute); font-weight: 600;
    border-top: 1px solid var(--m-line-soft);
    background: var(--m-bg);
}

/* ─────────── 헤더 알림 드롭다운 ─────────── */
.m-header__alert-wrap { position: relative; }
.m-header__alert-wrap .m-header__alert { border: none; background: transparent; }
.m-alert-drop {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 280px;
    background: var(--m-surface);
    border: 1px solid var(--m-line-soft);
    border-radius: var(--m-r-lg);
    box-shadow: var(--m-shadow-pop);
    padding: 6px;
    display: none;
    z-index: 150;
}
.m-alert-drop.is-open { display: block; animation: m-fade-in 140ms var(--m-ease-out); }
.m-alert-drop__item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: var(--m-r-sm);
    color: var(--m-text);
    font-size: 13px; font-weight: 600;
    transition: background var(--m-t-fast);
}
.m-alert-drop__item:hover { background: var(--m-bg); }
.m-alert-drop__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.m-alert-drop__dot--red  { background: var(--m-error); }
.m-alert-drop__dot--blue { background: var(--m-accent); }
.m-alert-drop__text { flex: 1; }
.m-alert-drop__text b { color: var(--m-ink); font-variant-numeric: tabular-nums; }
.m-alert-drop__go {
    font-size: 11.5px; font-weight: 700;
    color: var(--m-accent-deep);
    white-space: nowrap;
}

/* ─────────── 세션 저장 매장 선택 ─────────── */
.m-save-store-list {
    max-height: 260px; overflow-y: auto;
    border: 1px solid var(--m-line-soft); border-radius: var(--m-r-sm);
    padding: 4px;
}
.m-save-store {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    cursor: pointer; user-select: none;
    transition: background var(--m-t-fast);
}
.m-save-store:hover { background: var(--m-bg); }
.m-save-store__chk { width: 15px; height: 15px; accent-color: var(--m-accent); flex-shrink: 0; }
.m-save-store__name { font-size: 13px; font-weight: 700; color: var(--m-text); flex: 1; }
.m-save-store__meta { font-size: 11.5px; font-weight: 600; color: var(--m-text-mute); font-variant-numeric: tabular-nums; }
.m-linklike {
    background: none; border: none; padding: 0;
    font-size: 11.5px; font-weight: 700;
    color: var(--m-accent-deep); cursor: pointer;
}
.m-linklike:hover { text-decoration: underline; }